[已转移]IE事件流和DOM标准事件流的区别

该文章已转移到博客：https://cynthia0329.github.io/

1.执行的顺序不一样

冒泡型事件模型： button->div->body (IE事件流)

捕获型事件模型： body->div->button (Netscape事件流)

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)

2.事件侦听函数的区别 

IE使用: 

[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定 

DOM使用： 

[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定 

3、参数不一样和this指向不一样

IE下注册多个事件监听器与移除监听器方法

注册多个事件监听器

element.attachEvent('onclick', observer);

attachEvent接受两个参数。

第一个参数是事件名称

第二个参数observer是回调处理函数。

这里得说明一下，有个经常会出错的地方，IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象了，笔者很奇怪IE为什么要这么做，完全看不出好处所在。

移除先前注册的事件的监听器

 element.detachEvent('onclick', observer);

DOM标准下注册多个事件监听器与移除监听器方法

注册多个事件监听器

实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同，它通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。

 element.addEventListener('click', observer, useCapture);

addEventListener方法接受三个参数。

第一个参数是事件名称，值得注意的是，这里事件名称与IE的不同，事件名称是没’on’开头的;

第二个参数observer是回调处理函数;

第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用

它可以在一个DOM元素上绑定多个事件处理器，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。

移除先前注册的事件的监听器

element.removeEventListener('click', observer, useCapture);

参考：

https://www.cnblogs.com/nikiguo/p/8522317.html