标签：
一、event事件对象
1. 什么是event事件对象
2. document对象范围
3. event事件对象兼容性问题及解决方案
<script> document.onclick=function (ev) { var oEvent=ev||event; alert(oEvent.clientX+‘, ‘+oEvent.clientY); //IE //alert(event.clientX+‘, ‘+event.clientY); //FF //alert(ev.clientX+‘, ‘+ev.clientY); /*if(ev) { alert(ev.clientX+‘, ‘+ev.clientY); } else { alert(event.clientX+‘, ‘+event.clientY); }*/ }; </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html onclick="alert(‘html‘);" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body onclick="alert(‘body‘);"> <div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);"> <div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);"> <div style="width:100px; height:100px; background:#CCC;" onclick="alert(this.style.background);"> </div> </div> </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> #div1 {width:100px; height:150px; background:#CCC; display:none;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function () { oDiv.style.display=‘block‘; alert(‘按钮被点了‘); }; document.onclick=function () { oDiv.style.display=‘none‘; }; }; </script> </head> <body> <input id="btn1" type="button" value="显示" /> <div id="div1"> </div> </body> </html>
当用上面的写法时发现页面点击按钮毫无反应，当注释掉
//oDiv.style.display=‘none‘;
页面可以弹出菜单，但是菜单无法收回，去掉注释，加个alert来查看一下是怎么被执行的
<!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:150px; background:#CCC; display:none;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function () { var oBtn=document.getElementById(‘btn1‘); var oDiv=document.getElementById(‘div1‘); oBtn.onclick=function () { oDiv.style.display=‘block‘; alert(‘按钮被点了‘); }; document.onclick=function () { oDiv.style.display=‘none‘; alert(‘页面被点了‘); }; }; </script> </head> <body> <input id="btn1" type="button" value="显示" /> <div id="div1"> </div> </body> </html>
点击菜单可以出现，alert按钮被点了，确定alert(‘页面被点了‘)
这是因为按钮也是在页面里面的，所以点击按钮会冒泡到document，这就是冒泡带来的困扰。
要想解决这个问题，就要用到取消冒泡。
取消冒泡：ev.cancelBubble=true
<!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:150px; background:#CCC; display:none;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <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‘; //alert(‘按钮被点了‘); oEvent.cancelBubble=true;//取消冒泡 }; document.onclick=function () { oDiv.style.display=‘none‘; //alert(‘页面被点了‘); }; }; </script> </head> <body> <input id="btn1" type="button" value="显示" /> <div id="div1"> </div> </body> </html>
一般自定义的下拉列表都是需要用到取消冒泡的。
4.鼠标位置
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #div1 {width:100px; height:100px; background:red; position:absolute;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script> 10 document.onmousemove=function (ev) 11 { 12 var oEvent=ev||event; 13 var oDiv=document.getElementById(‘div1‘); 14 15 oDiv.style.left=oEvent.clientX+‘px‘; 16 oDiv.style.top=oEvent.clientY+‘px‘; 17 }; 18 </script> 19 </head> 20 21 <body> 22 <div id="div1"> 23 </div> 24 </body> 25 </html>
<script> document.onmousemove=function (ev) { var oEvent=ev||event; var oDiv=document.getElementById(‘div1‘); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.left=oEvent.clientX+scrollLeft+‘px‘; oDiv.style.top=oEvent.clientY+scrollTop+‘px‘; }; </script>
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 div {width:10px; height:10px; background:red; position:absolute;} 6 </style> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>无标题文档</title> 9 <script> 10 window.onload=function () 11 { 12 var aDiv=document.getElementsByTagName(‘div‘); 13 var i=0; 14 15 document.onmousemove=function (ev) 16 { 17 var oEvent=ev||event; 18 19 for(i=aDiv.length-1;i>0;i--) 20 { 21 aDiv[i].style.left=aDiv[i-1].style.left; 22 aDiv[i].style.top=aDiv[i-1].style.top; 23 } 24 25 aDiv[0].style.left=oEvent.clientX+‘px‘; 26 aDiv[0].style.top=oEvent.clientY+‘px‘; 27 }; 28 }; 29 </script> 30 </head> 31 32 <body> 33 <div></div> 34 <div></div> 35 <div></div> 36 <div></div> 37 <div></div> 38 <div></div> 39 <div></div> 40 <div></div> 41 <div></div> 42 <div></div> 43 <div></div> 44 <div></div> 45 <div></div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 <div></div> 51 <div></div> 52 <div></div> 53 <div></div> 54 <div></div> 55 <div></div> 56 <div></div> 57 <div></div> 58 <div></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 <div></div> 63 <div></div> 64 <div></div> 65 <div></div> 66 <div></div> 67 <div></div> 68 <div></div> 69 <div></div> 70 <div></div> 71 <div></div> 72 <div></div> 73 </body> 74 </html>
二、键盘事件 onkeydown、keyCode
<script> document.onkeydown=function (ev) { var oEvent=ev||event; alert(oEvent.keyCode); }; </script>
•例子：键盘控制Div移动（左右移动）
<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>
其他属性
<!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.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>
–ctrl+回车 提交留言
<!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>
ctrlKey 布尔值 按住TRUE 不按住false
总结知识点：
标签：
原文地址：http://www.cnblogs.com/eveblog/p/4502830.html
