事件基础（一）

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>