Posted in Javascript onNovember 06, 2013
document是位于html标签之上的,可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
<script> document.onclick=function(){ alert('a'); }; </script>
获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
<script> document.onclick=function(ev){ if(ev) { alert(ev.clientX+','+ev.clientY); } else{ alert(event.clientX+','+event.clentY); }; }; </script>
或者
<script> document.onclick=function(ev){ /* if(ev) { alert(ev.clientX+','+ev.clientY); } else{ alert(event.clientX+','+event.clentY); }; };*/ var oEvent=ev||event; alert(oEvent.clientX+','+oEvent.clientY); }; </script>
事件冒泡---一层一层叠加的元素在一起,形成事件冒泡,比如下面的例子:document的最大范围影响了div的响应。
<script> window.onload=function(){ var obtn=document.getElementById('btn1'); var odiv=document.getElementById('div1'); obtn.onclick=function(ev){ var oEvent=ev||event; odiv.style.display='block'; oEvent.cancelBubble=true;//清除冒泡 }; document.onclick=function(){ odiv.style.display='none'; }; }; </script> </head> <body> <input type="button" value="显示" id="btn1"/> <div id="div1" style="width:100px;height:150px;background:#ccc;"></div> </body>
鼠标移动---在可视区有效
<title>鼠标移动</title> <script> window.onmousemove=function(ev){ var oEvent=ev||event; var odiv=document.getElementById('div1'); odiv.style.left=oEvent.clientX+'px'; odiv.style.top=oEvent.clientY+'px'; }; </script> </head> <body> <div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div> </body>
键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:#CCC; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> document.onkeydown=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById('div1'); //← 37 //右 39 if(oEvent.keyCode==37) { oDiv.style.left=oDiv.offsetLeft-10+'px'; } else if(oEvent.keyCode==39) { oDiv.style.left=oDiv.offsetLeft+10+'px'; } }; </script> </head> <body> <div id="div1"></div> </body> </html>
鼠标跟随小尾巴
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> div {width:10px; height:10px; background:red; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var aDiv=document.getElementsByTagName('div'); var i=0; document.onmousemove=function (ev) { var oEvent=ev||event; for(i=aDiv.length-1;i>0;i--) { aDiv[i].style.left=aDiv[i-1].style.left; aDiv[i].style.top=aDiv[i-1].style.top; } aDiv[0].style.left=oEvent.clientX+'px'; aDiv[0].style.top=oEvent.clientY+'px'; }; }; </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
keycode
<script> document.onkeydown=function (ev) { var oEvent=ev||event; alert(oEvent.keyCode); }; </script>
ctrlKey---可以通过ctrl+enter组合键来提交内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <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> </head> <body> <textarea id="txt1" rows="10" cols="40"></textarea><br /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="留言" /> </body> </html>
Javascript事件实例详解
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@