从本文开始我们将回顾下Javascript的事件机制，系统讲解Javascript事件模块的演变。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。

先看看页面中添加事件的几种方式

1，直接将JS代码写在HTML上

1 <div onclick="alert(4);">Div1 Element</div>

HTML Element元素自身就拥有了很多onXXX属性，只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体（FunctionBody）。大概这是上世纪90年代的写法，那时候直接把JS代码写在网页中很普遍，也许那时候的JS并不太重要，只是用来做做验证或一些花哨的效果而已。

2，定义一个函数，赋值给html元素的onXXX属性

1 <script type="text/javascript"> 

2      function clk(){} 

3 </script> 

4 <div onclick="clk()">Div2 Element</div>

先定义函数clk，然后赋值给onclick属性，这种方式也应该属于上世纪90年代的流行写法。比第一种方式好的是它把业务逻辑代码都封装在一个函数里了，使HTML代码与JS代码稍微有点儿分离，不至于第一种那么紧密耦合。

3，使用element.onXXX方式

1 <div id="d3">Div3 Element</div> 

2 <script type="text/javascript">    

3     var d3 = document.getElementById('d3'); 

4     d3.onclick = function(){    } 

5 </script>

这种方式也是早期的写法，但好处是可以将JS与HTML完全分离，前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)。

4，使用addEventListener或attachEvent

01 <div id="d4">Div4 Element</div> 

02 <script type="text/javascript"> 

03 var d4 = document.getElementById('d4'); 

04 function clk(){alert(4)} 

05 if(d4.addEventListener){ 

06 d4.addEventListener('click',clk,false);  

07 } 

08 if(d4.attachEvent){  

09 d4.attachEvent('onclick',clk); 

10 } 

11 </script>

这是目前推荐的方式，较前两种方式功能更为强大，可以为元素添加多个事件handler，支持事件冒泡或捕获，前三种方式默认都是冒泡。IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent，且不支持事件捕获。

好，把方式4简单的封装下，  兼容标准浏览器及IE浏览器。注意attachEvent的第一个参数需要加上个"on"，addEventListener第三个参数为false表示事件冒泡，attachEvent没有第三个参数，默认就是冒泡，没有捕获。

01 /** 

02  *  

03  * @param {Object} el HTML Element 

04  * @param {Object} type 事件类型 

05  * @param {Object} fn 事件handler 

06  */

07 function addEvent(el, type, fn){ 

08     if(el.addEventListener){ 

09         el.addEventListener(type, fn, false); 

10     }else{ 

11         el.attachEvent('on' + type, fn); 

12     } 

13 }

好，用这个工具函数添加一个给document添加一个点击事件
1 function handler(){ 

2     alert(this); 

3     alert(arguments[0]); 

4 } 

5 addEvent(document, 'click', handler);

在Firefox等标准浏览器中，点击页面后将弹出 “[object HTMLDocument]”，及handler中的this就是document自身。但在IE6/7/8中this却是window对象。这让人不爽，修改下与标准浏览器统一。

view sourceprint?01 function addEvent(el, type, fn){ 

02     if(el.addEventListener){ 

03         el.addEventListener(type, fn, false); 

04     }else{   

05         el['e' + fn] = function(){ 

06             fn.call(el, window.event); 

07         } 

08         el.attachEvent('on'+type, el['e'+fn]); 

09     } 

10 }