DOM事件

1、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0：onclick 只能绑定一个事件，绑定多个会产生覆盖；不能设置参数，使用默认的事件冒泡阶段。
DOM2：addEventListener中有第3个参数，attachEvent没有。第3个参数传递的是false或true。这个参数可选，默认是false。
false--表示事件处理将在冒泡阶段执行。
true--表示事件处理将在捕获阶段执行。
理论上，Event Listeners (addEventListener、attachEvent（IE使用）)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异。

参数个数不相同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以会返回undefined，而不是元素id。
为一个事件添加多个事件处理程序时，执行的顺序不同。 addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时，顺序是无规律的。

当事件发生在某个文档节点上时（即事件目标），目标的事件处理程序就会被触发。此外目标的每个祖先节点也有机会处理该事件。

2级DOM的事件传播包含三个阶段:
捕捉阶段（capturing），事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
到达事件的目标节点，执行目标节点的时间处理程序。
事件起泡（bubbling），事件从目标节点一级一级向上上溯，直到顶级文档树节点。
相应的，2级DOM通过下面的两个函数给节点对象添加和删除事件处理函数。
addEventListener(eventType, handler, propagate);
removeEventListener(eventType, handler, propagate);
三个参数意思分别如下:
eventType: 即事件类型（不加on）。比如："click"。
handler: 事件处理函数。传入参数即为事件对象event。
propagate: 是否只执行捕获和目标节点两个阶段。true的话，只执行1，2两个阶段；false的话，只指向2，3两个阶段。
IE的事件传播只包含上边的2和3两个阶段
相应的，IE通过下面两个函数给节点对象添加和删除事件处理函数。
attachEvent(eventType, handler);
detachEvent(eventType, handler);
参数意思同2级DOM对应的函数参数


    这里是
    饥人谷
    前端6班

方法一（利用闭包）：http://js.jirengu.com/kidog/1/edit?html,js,console,output
方法二（利用 this）：http://js.jirengu.com/tehuq/1/edit?js,console,output


    这里是
    饥人谷
    任务班

预览地址：http://js.jirengu.com/zacam/1/edit?html,js,console,output


    鼠标放置查看图片1
    鼠标放置查看图片2
    鼠标放置查看图片3

预览链接：http://js.jirengu.com/bagix/2/edit
方法二：利用事件代理
预览链接：http://js.jirengu.com/duseb/3/edit?html,js,output