前言

什么是 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 区别