1. 什么是事件对象
2. document对象范围 document是整个页面。但是body仅仅指的是部分，当没设置body的内容的时，里面的内容为空。
1 window.onload=function(){ 2 document.body.onclick=function () 3 { 4 alert('a'); 5 }; 6 }
//////////////////////
document.body.onclick=function ()
{
alert('a');
};
单独使用这个代码没用window.onload=function(){}时，是没有用的，因为document没有加载完，是获取不到body这个标签的哦。
这样是不能弹出 a 的；
1 document.onclick=function () 2 { 3 alert('a'); 4 };
这样点击时才能弹出 a
document 是最顶层的虚拟的父节点，我们可以通过document来找到下面所有的东西。连html也是包含在document里面。
3. event事件对象、clientX、clientY
获取鼠标坐标。函数可以传参数
4. 事件对象的兼容性问题及解决方案
if else 是通用的解决方案，|| 也是一个常用的解决方法。
1 document.onclick=function (ev) 2 { 3 var oEvent=ev||event;//Ie 下和FF下的兼容性问题 4 5 alert(oEvent.clientX+', '+oEvent.clientY); 6 //IE 7 //alert(event.clientX+', '+event.clientY); 8 9 //FF 10 //alert(ev.clientX+', '+ev.clientY); 11 12 /*if(ev) 13 { 14 alert(ev.clientX+', '+ev.clientY); 15 } 16 else 17 { 18 alert(event.clientX+', '+event.clientY); 19 }*/ 20 };
或 的另外一种方法，当 || 一边是真一边是假的时候，他会给你返回那个属于真的。当||两边都是真的时候，他会按先后顺序返回，他先碰到谁，就返回谁。
var a=12||'abc'; alert(a); //返回12； var a='abc'||12; alert(a); //返回 abc var a=''||12; alert(a); //返回12
5. 事件冒泡原理
子类执行完事件之后，会不断的往父级传递。(例如:老师请学生来办公室，然后请家长来)
1 <body onclick="alert('body');"> 2 <div style="300px; height:300px; background:red;" onclick="alert(this.style.background);"> 3 <div style="200px; height:200px; background:green;" onclick="alert(this.style.background);"> 4 <div style="100px; height:100px; background:#CCC;" onclick="alert(this.style.background);"> 5 </div> 6 </div> 7 </div>
1 window.onload=function () 2 { 3 var oBtn=document.getElementById('btn1'); 4 var oDiv=document.getElementById('div1'); 5 6 oBtn.onclick=function (ev) 7 { 8 var oEvent=ev||event; 9 oDiv.style.display='block'; 10 //alert('按钮被点了'); 11 12 //oEvent.cancelBubble=true;//取消冒泡 13 }; 14 15 document.onclick=function () 16 { 17 oDiv.style.display='none'; 18 //alert('页面被点了'); 19 }; 20 };
6. 取消事件冒泡：cancelBubble、弹出层实例
oEvent.cancelBubble=true;//取消冒泡
7. 跟随鼠标的DIV实例
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 {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>