事件沿DOM树向上传播

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

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

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

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

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

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

 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 }

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

 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 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

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

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