addEventListener()和attachEvent的区别

看到这2种事件绑定方法,研究下

attachEvent

attachEvent(eventfunction,):IE提出的标准html

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。只支持IEchrome

方法 IE
attachEvent()  

语法 

event

必须。字符串,指定事件名。
注意: 使用 "on" 前缀。 例如,使用 "onclick" ,而不是使用 "click"。 
支持绑定多个事件,绑定的先执行。浏览器

取消绑定事件:detachEvent()
提示: 全部 HTML DOM 事件,能够查看咱们完整的 Microsoft官方文档dom

function 必须。指定要事件触发时执行的函数。 

当事件对象会做为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "onclick" 事件属于 MouseEvent(鼠标事件) 对象。

范例

document.getElementById("myBtn").attachEvent("onclick", myFunction)
//官方的example已经移除,并推荐使用addEventListener

addEventListener

addEventListener(eventfunction, boolean):W3C提出的标准,创建在DOM Level 2 Events基础上函数

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。spa

方法 chrome IE firefox sifari Opera
addEventListener() 1.0 9.0 1.0 1.0 7.0

语法 

event

必须。字符串,指定事件名。
注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 
支持绑定多个事件,绑定的先执行。firefox

取消绑定事件:removeEventListener
提示: 全部 HTML DOM 事件,能够查看咱们完整的 HTML DOM Event 对象参考手册code

function 必须。指定要事件触发时执行的函数。 

当事件对象会做为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。

可能值:
  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

范例

document.getElementById("myBtn").addEventListener("click", myFunction)
相关文章
相关标签/搜索