从本文开始我们将回顾下Javascript的事件机制，系统讲解事件模块的演变。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。
先看看页面中添加事件的几种方式
1，直接将代码写在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 }
