Javascript事件实例详解_基础知识

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.onload=function(){<BR> var obtn=document.getElementById('btn1');<BR> var odiv=document.getElementById('div1');<BR> obtn.onclick=function(ev){<BR> var oEvent=ev||event;<BR> odiv.style.display='block';<BR> oEvent.cancelBubble=true;//清除冒泡<BR> };<BR> document.onclick=function(){<BR> odiv.style.display='none';<BR> };<BR> };<BR></script>

 

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

复制代码 代码如下:

 
<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>

 

鼠标跟随小尾巴

复制代码 代码如下:

<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>