一、事件流
1、事件冒泡
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
