Javascript事件实例详解_基础知识-js教程-PHP中文网

document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。

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

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置

复制代码代码如下:

 <script><br>    document.onclick=function(ev){<br>        if(ev)<br>        {<br>            alert(ev.clientX ',' ev.clientY);<br>        }<br>        else{<br>            alert(event.clientX ',' event.clentY);<br>        };<br>    };<br></script>
 

或者

复制代码代码如下:

 <script><br>    document.onclick=function(ev){<br>    /*    if(ev)<br>        {<br>            alert(ev.clientX ',' ev.clientY);<br>        }<br>        else{<br>            alert(event.clientX ',' event.clentY);<br>        };<br>    };*/<br>    var oEvent=ev||event;<br>    alert(oEvent.clientX ',' oEvent.clientY);<br>    };<br></script>
 

事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。

复制代码代码如下:

鼠标移动---在可视区有效

复制代码代码如下:

鼠标移动
<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>

键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。

复制代码代码如下:

无标题文档
<script><br>document.onkeydown=function (ev)<br>{<br>    var oEvent=ev||event;<br>    var oDiv=document.getElementById('div1');<br><br>    //←        37<br>    //右        39<br><br>    if(oEvent.keyCode==37)<br>    {<br>        oDiv.style.left=oDiv.offsetLeft-10 'px';<br>    }<br>    else if(oEvent.keyCode==39)<br>    {<br>        oDiv.style.left=oDiv.offsetLeft 10 'px';<br>    }<br>};<br></script>

鼠标跟随小尾巴

复制代码代码如下:

gt;

<样式>
div {width:10px;高度：10px；背景：红色；位置：绝对;}

 ;无标题文档
<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>

< ;div>

< ;/div>

< ;div>

< ;/div>

密钥代码

复制代码代码如下：

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

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

复制代码代码如下：

無标题文档
<script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); oBtn.onclick=function () { oTxt1.value =oTxt2.value 'n'; oTxt2.value=''; }; oTxt2。 onkeydown = function（ev） { var oevent = ev || event; if（oevent.ctrlkey && oevent.keycode == 13） { otxt1.value =oTxt2.value 'n'; oTxt2.value=''; } }; }; </script>