Javascript Event事件中IE与标准DOM的区别-优快云博客

本文详细解析了不同浏览器中事件流模型的区别，包括IE的冒泡型、Netscape的捕获型及DOM的先捕获后冒泡型，并对比了事件监听函数绑定与解除绑定的方法差异。同时介绍了事件对象的获取方式、如何获取触发事件的目标元素、阻止事件的默认行为及冒泡等关键操作。

1.事件流的区别
<body>
<div>
<button>点击这里</button>
</div>
</body>
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件

冒泡型事件模型： 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); //移除绑定

bCapture参数用于设置事件绑定的阶段，true为捕获阶段，false为冒泡阶段。

3.事件对象定位(获取)

IE：事件对象是window对象的一个属性event，event只能在事件发生时访问，事件处理函数执行完毕，事件对象被销毁。

DOM：event对象必须作为唯一的参数传递给事件处理函数，且必须为第一个参数。

4.获取目标(target)
IE：var oTarget=event.srcElement;
DOM：var oTarget=event.target;

5.阻止事件默认行为

IE：event.returnValue=false;
DOM：event.preventDefault();

6.停止事件复制（冒泡）
IE：event.cancelBubble=true;
DOM：event.stopPropagation();

转载于:https://www.cnblogs.com/wu-web/p/6805561.html