W3C的事件处理和IE的事件处理有哪些区别?
W3C和IE(特指IE9之前的版本,IE9及之后版本已基本遵循W3C标准)的事件处理模型主要在以下几个方面存在区别:
1. 事件绑定:
- W3C: 使用
addEventListener()
方法添加事件监听器,可以为同一元素的同一事件类型绑定多个处理函数。addEventListener()
接受三个参数:事件类型(字符串,例如 "click")、事件处理函数和一个布尔值(用于捕获阶段,稍后解释)。 - IE: 使用
attachEvent()
方法添加事件监听器。attachEvent()
接受两个参数:事件类型(字符串,例如 "onclick",注意事件类型前要加 "on")和事件处理函数。IE8及更早版本不支持为同一元素的同一事件类型绑定多个处理函数,后绑定的会覆盖先绑定的。
2. 事件对象:
- W3C: 事件对象作为参数传递给事件处理函数。可以通过
event
参数访问事件的各种属性,例如event.target
获取触发事件的目标元素。 - IE: 事件对象是一个全局对象,可以通过
window.event
访问。
3. 事件流:
- W3C: 定义了两种事件流:捕获阶段和冒泡阶段。
- 捕获阶段: 事件从文档根节点向下传播到目标元素。
- 冒泡阶段: 事件从目标元素向上传播到文档根节点。
addEventListener()
的第三个参数用于指定事件处理函数是在捕获阶段还是冒泡阶段执行。true
表示捕获阶段,false
表示冒泡阶段(默认值)。
- IE: 只支持冒泡阶段。
4. this指向:
- W3C: 在事件处理函数中,
this
指向触发事件的目标元素。 - IE: 在事件处理函数中,
this
指向全局对象window
。
5. 阻止事件传播和默认行为:
- W3C:
event.stopPropagation()
阻止事件传播。event.preventDefault()
阻止事件的默认行为。
- IE:
event.cancelBubble = true
阻止事件传播。event.returnValue = false
阻止事件的默认行为。
总结:
特性 | W3C | IE |
---|---|---|
事件绑定 | addEventListener() |
attachEvent() |
事件类型 | "click" | "onclick" |
事件对象 | event 参数 |
window.event |
事件流 | 捕获和冒泡 | 冒泡 |
this指向 | 目标元素 | window |
阻止传播 | stopPropagation() |
cancelBubble = true |
阻止默认行为 | preventDefault() |
returnValue = false |
由于这些差异,为了编写兼容不同浏览器的代码,通常需要使用一些技巧或库来处理事件。现在,由于IE的市场份额已经非常低,并且主流浏览器都支持W3C标准,开发者可以更专注于W3C标准的事件处理模型。但在维护一些老旧项目时,仍然需要注意这些区别。