addEventListener与attachEvent的区别

为啥为突然写到这个呢，还是一个练习引出的乱子，动态给按钮添加点击事件在chorme游览器竟然发生报错，没有这个函数。

话说好记性不如烂笔头，只能靠知乎每天这样子维持这样的生活咯，年轻人要讲网德，把自己遇到的问题分享给大家。

练习demo图片

后面发现个问题，加了addEventListener之后就可以使用了。

下面将两者的区别列在下边。

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.事件处理程序方法

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