Detailed explanation of Javascript event examples_Basic knowledge

The document is located above the html tag and can be said to have the most power. The example below will pop up "a" when you click anywhere on the page, which uses the characteristics of document.

Copy code The code is as follows:

<script> <br> document.onclick=function (){<br> alert('a');<br> };<br> </script>

Get the mouse position clientX, clientY---note that this is only visible The mouse position of the area

Copy the code The code is as follows:

<script><br> document .onclick=function(ev){<br>                                                                                                                                                                                       alert(event .clientX ',' event.clentY);<br>                          ; <br>Copy code<br><br><br> The code is as follows:<br><br><br> <script><br> document.onclick=function(ev){</div> /* if(ev )<br> {<br> alert(ev.clientX ',' ev.clientY);<div class="codetitle"> }<span> else{<a style="CURSOR: pointer" data="70903" class="copybut" id="copybut70903" onclick="doCopy('code70903')"> alert(event.clientX ',' event.clentY);<u> } ;</u> };*/</a> var oEvent=ev||event;</span> alert(oEvent.clientX ',' oEvent.clientY);</div> };<div class="codebody" id="code70903"></script>


Event bubbling---Elements stacked layer by layer together form event bubbling, such as the following example: the maximum range of the document affects the response of the div.




Copy code


The code is as follows:


<script><br> window.onload=function () () {<ar> var obtn = document.GetelementByid ('btn1'); </ar> </div> var oDiv = document.GetelementByid ('div1'); En> var oEvent =ev||event;<br> odiv.style.display='block';<br> oEvent.cancelBubble=true;//Clear bubbles<div class="codetitle"> };<span> document.onclick=function(){<a style="CURSOR: pointer" data="10424" class="copybut" id="copybut10424" onclick="doCopy('code10424')">             odiv.style.display='none';<u>                                         input type="button" value="display" id="btn1"/></u><div id="div1" style="width:100px;height:150px;background:#ccc;">&lt ;/div></a></body></span> </div> <div class="codebody" id="code10424">Mouse movement---valid in the visible area<br><br><br><br><br>Copy code<br><br><br> The code is as follows:<br><div class="codebody" id="code91861"> <br> <title>Mouse movement</title><br><script><br> window.onmousemove=function(ev){<br> var oEvent=ev||event;<br> var odiv=document.getElementById('div1');<br> odiv.style.left=oEvent.clientX 'px';<br> odiv.style.top=oEvent.clientY 'px';<br> };<br></script>

Change the position and direction of the keyboard---get the key value of the keyboard through keycode to perform the corresponding operation.

Copy code The code is as follows:

<script><br>window.onload=function ()<br>{<br>    var aDiv=document.getElementsByTagName('div');<br>    var i=0;<br><br>    document.onmousemove=function (ev)<br>    {<br>        var oEvent=ev||event;<br><br>        for(i=aDiv.length-1;i>0;i--)<br>        {<br>            aDiv[i].style.left=aDiv[i-1].style.left;<br>            aDiv[i].style.top=aDiv[i-1].style.top;<br>        }<br><br>        aDiv[0].style.left=oEvent.clientX 'px';<br>        aDiv[0].style.top=oEvent.clientY 'px';<br>    };<br>};<br></script>

keycode

复制代码 代码如下:

 <script><br>document.onkeydown=function (ev)<br>{<br>    var oEvent=ev||event;<br><br>    alert(oEvent.keyCode);<br>};<br></script>
 

 ctrlKey---可以通过ctrl enter组合键来提交内容

复制代码 代码如下:

<script><br>window.onload=function ()<br>{<br>    var oBtn=document.getElementById('btn1');<br>    var oTxt1=document.getElementById('txt1');<br>    var oTxt2=document.getElementById('txt2');<br><br>    oBtn.onclick=function ()<br>    {<br>        oTxt1.value =oTxt2.value 'n';<br>        oTxt2.value='';<br>    };<br><br>    oTxt2.onkeydown=function (ev)<br>    {<br>        var oEvent=ev||event;<br><br>        if(oEvent.ctrlKey && oEvent.keyCode==13)<br>        {<br>            oTxt1.value =oTxt2.value 'n';<br>            oTxt2.value='';<br>        }<br>    };<br>};<br></script>