1、DOM0级事件和DOM2级事件

DOM 0级事件是元素内的一个私有属性：div.onclick = function () {}，对一个私有属性赋值(在该事件上绑定一个方法)。由此可知DOM 0级事件只能给元素的某一个行为绑定一次方法，第二次绑定会把前面的覆盖掉。

DOM 2级事件是让DOM元素通过原型链一直找到EventTarget这个内置类原型上的addEventListener方法来实现的。

DOM 2可以给某一个元素的同一个行为绑定多个不同的方法

//实例 1obj.addEventListener(事件类型 , 处理函数 , false) //IE9以下不兼容，可以为一个事件绑定多个处理程序，并且按照绑定时的顺序去执行 //实例2div.addEventListener('click' , function f() {} , false); //1div.addEventListener('click' , function f() {} , false); //2 //事件1和事件2虽然执行的函数一样，但是函数f()的地址不一样，所以是2个处理函数，执行2次 //实例3function f() {}; div.addEventListener('click' , f , false); //1div.addEventListener('click' , f , false); //2 //事件1和事件2执行的函数都是f(),但因为地址一样，所以只执行一次。即某一个元素的同一个行为只能绑定一次相同的方法

1.1、DOMContentLoaded和loaded

DOM 2还提供了DOM 0中没有的行为类型 -> DOMContentLoaded：当页面中的DOM结构(HTML结构)加载完成触发的行为。而onload事件则是当页面中的所有资源全部加载完成(图片、html结构、音视频...)才会被执行。

jQuery中的$(document).ready(function () {})，等价于$(function () {})，事件原理就是DOM2中新增的DOMContentLoaded事件。

1.2、事件的移除

DOM 0级事件的移除：div.onclick = null；

DOM 2级事件的移除：

function fn() {}; div.addEventListener('click',fn,false); div.removeEventListener('click',fn,false);

1.3、DOM2事件机制

• 只能给某个元素的同一个行为绑定多个"不同"的方法
• 当行为触发，会按照绑定的先后顺序把绑定的方法执行
• 执行的方法中的this是当前绑定事件的元素本身

1.4、IE6-8下的事件机制

在IE6-8浏览器中，不支持addEventListener/removeEventLiatener，如果想实现DOM 2事件绑定，只能用attachEvent(),移除用detachEvent()。

 obj.attachEvent('on'+type , func);只能在冒泡阶段发生，一个事件同样可以绑定多个处理函数。与obj.addEventListener('type' , func , false)不一样的是，即使函数的地址是一样的，绑定多少次就执行多少次。即同一个函数可以绑定多次

与标准浏览器的事件池机制对比：

• this问题：IE6-8中当方法执行的时候，方法中的this不是当前元素，而指的是window
• 重复问题：可以给同一个元素的同一个行为绑定多个相同的方法
• 顺序问题：执行的时候顺序是混乱的，标准浏览器是按照绑定顺序依次执行

2、处理this问题

/*  *    bind: 处理DOM2级事件绑定的兼容性问题  *    @parameter:  *    curEle: 要绑定事件的元素  *    eventType: 要绑定的事件类型('click','mouseover'...)  *    eventFn: 要绑定的方法  */ var tempFn = {};  function
                        
关键字：