addEventListener与attachEvent区别

96
阿鲁提尔
2018.05.01 23:56 字数 239

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的绑定事件方法

IE不支持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

javascript
Web note ad 1