[转]JavaScript事件(Event)

一、事件流

1、事件冒泡

  事件沿DOM树向上传播

2、事件捕获

  事件到达预定目标之前被捕获

3、DMO2级事件

  事件捕获阶段，处于目标阶段，事件冒泡阶段

二、事件处理程序

格式：on +　＂事件名＂

1、HTML事件处理程序

1 <input type="button" value="click me" onclick="showMessage()" >

 

2、DOM0级事件处理程序

1 element.onclick = function(){ //... }

3、DOM2级事件处理程序

1 element.addEventListener(type,handle,boolean);
2 element.removeEventListener(type,handle,boolean);

4、IE事件处理程序(ie9以下版本)

1 element.attachEvent("on" + type,handle);
2 element.detachEvent("on" + type,handle);

【注：此时事件处理函数的作用域为全局作用域，this等于window】



三、事件对象

1、DOM(DOM0或DOM2级)中的事件对象

a、事件对象(event)作为参数传入于事件处理程序中
b、对象this,currentTarget,target之间的关系

对象this始终等于currentTarget
当事件处于捕获或冒泡阶段时，三者不相等
当事件处于目标阶段时，三者相等

c、preventDefault()与stopPropagation()
preventDefault(): 取消事件默认行为
stopPropagation()： 阻止事件的捕获和冒泡


2、IE中的事件对象(ie9以下版本)

a、通过window.event来访问事件对象，在使用attach添加事件时，也可以作为参数传入
b、cancelBubble设置为true时，取消事件冒泡
c、returnValue设置为false时，取消事件的默认行为
d、srcElement与DOM中的target属性相同



四、跨浏览器的事件对象

 1 var EventUtil = {
 2     addHandler: function(element,type,handler){
 3         if(element.addEventListener){
 4             element.addEventListener(type,handler,false);
 5         }else if(element.attachEvent){
 6             element.attachEvent( "on" + type,handler);
 7         }else{
 8             element["on" + type] = handler;
 9         }
10     },
11     getEvent: function(e){
12         return e ? e : window.event;
13     },
14     getTarget: function(e){
15         e = this.getEvent(e);
16         return e.target || e.srcElement;
17     },
18     getRelatedTarget: function(e){
19         e = this.getEvent(e);
20         if(e.relatedTarget){
21             return e.relatedTarget;    
22         }else if(e.fromTarget){
23             return e.fromTarget;    
24         }else if(e.toTarget){
25             return e.toTarget;
26         }else{
27             return null;
28         }
29     },
30     stopPropagation: function(e){
31         e = this.getEvent(e);
32         if(e.stopPropagation){
33             e.stopPropagation();
34         }else{
35             e.cancelBubble = true;
36         }
37     },
38     preventDefault: function(e){
39         e = this.getEvent(e);
40         if(e.preventDefault){
41             e.preventDefault();
42         }else{
43             e.returnValue = false;
44         }
45     },
46     removeHandler: function(element,type,handler){
47         if(element.removeEventListener){
48             element.removeEventListener(type,handler,false);
49         }else if(element.detachEvent){
50             element.detachEvent( "on" + type,handler);
51         }else{
52             element["on" + type] = null;
53         }
54     }
55 }

 

五、事件委托

事件委托: 就是利用事件冒泡，把事件注册到目标元素的更高层级元素上，用来减少页面事件处理程序，提高页面性能

如：HTML

1 <ul id="ul">
2     <li id="li1"></li>
3     <li id="li2"></li>
4     <li id="li3"></li>
5 </ul>

JavaScript

 1 var ul = document.getElementById("ul");
 2 EventUtil.addHandler(ul,"click",function(e){
 3     var target = EventUtil.getTarget(e);
 4     switch(target.id){
 5         case "li1":
 6         console.log(target.id);
 7         break;
 8         
 9         case "li2":
10         console.log(target.id);
11         break;
12         
13         case "li3":
14         console.log(target.id);
15         break;
16     }
17 });

 

六、命名空间(对象)中的变量访问

命名空间中的变量可以直接访问全局中的变量，但是不能访问其他(函数)作用域中的变量，只能通过传递参数来访问

1、错误代码:

1 obj = {
2     method: function(){
3         console.log(arg);
4     }
5 }
6 function fn(arg){
7     obj.method();
8 }
9 fn("test"); //arg is not defined

不能直接访问其他作用域中的变量


2、访问全局变量：

1 var arg = "test";
2 var obj = {
3     method: function(){
4         console.log(arg);  //可以直接访问全局变量arg
5     }
6 }
7 obj.method(); //test

3、传递参数来访问变量:

1 var obj = {
2     method: function(arg){ //通过传递参数来访问其他函数中的变量
3         console.log(arg);
4     }
5 }
6 function fn(arg){
7     obj.method(arg);
8 }
9 fn("test"); //test