addEventListener 与 attachEvent 区别

前言

什么是 DOM2 级事件处理程序？

DOM0 级

这种事件处理程式在第四代 web 浏览器出现，为所有浏览器支持。每个元素都有相应的事件处理程式属性，例如 onclick，通过将事件函数引用赋值给事件处理程式属性绑定事件。

DOM2 级

DOM2 级的事件处理程式分成两类：IE 和 非IE。

简单总结

DOM0 级
1 使用赋值方式绑定事件；
2 只能在冒泡阶段触发；
3 只能绑定一个事件函数；
4 通过置空 onclick 属性解绑事件；
5 事件函数 this 属性引用当前函数对象。

DOM2 级
1 非 IE 方式
1.1 使用 addEventListener 绑定事件；
1.2 事件名无 on 前缀；
1.3 使用 addEventListener 第三个参数控制事件触发阶段；
1.4 可绑定多个事件函数；
1.5 多个事件函数的触发顺序和绑定顺序一样；
1.6 事件函数 this 属性引用当前函数对象；

2 IE 方式
和非 IE 不同的是以下几点：
2.1 事件名带 on 前缀；
2.2 事件函数 this 属性引用全局对象；
2.3 多个事件函数的书法顺序和绑定顺序相反；

IE9 以后，就支持 addEventListener 了。

点我了解更多 DOM0 和 DOM2 级事件处理程序。

DOM2 级事件处理程序

DOM2 级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

• addEventListener
• removeEventListener

所有的 DOM 节点都包含这两个方法，并且他们都接受三个参数：

1.事件类型
2.事件处理方法
3.布尔参数，默认 false ( true 捕获阶段调用事件处理方法；false 冒泡阶段调用事件处理方法。)

//addEventListener
let box = document.querySelector('.box')
box.addEventListener('click',function(){
  console.log('box clicked...')
})


function xxx(){console.log('box clicked...')}
box.addEventListener('click',xxx)   //添加事件
box.removeEventListener('click',xxx)   //删除事件

简写的 onclick 和 addEventListener 区别

box.onclick = function(){ console.log('1') }
box.onclick = function(){ console.log('2') }   //会覆盖 1

box.addEventListener('click',function(){ console.log('1') })
box.addEventListener('click',function(){ console.log('2') })  //不会覆盖

IE7 ,8 的绑定事件方法

IE7 ,8 不支持 addEventListener 和 removeEventListener 方法
实现了两个类似的方法：

• attachEvent
• detachEvent

这两个方法都接受两个相同的参数。

1.事件处理程序名称
2.事件处理程序方法

// IE只支持事件冒泡
let box = document.querySelector('.box')
function xxx(){console.log('box clicked...')}
box.attachEvent('onclick',xxx)

兼容性

attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

转自：addEventListener 与 attachEvent 区别