原生js——事件监听方法

一、传统事件绑定方法

我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法事例如下：

window.οnlοad=function(){
    alert("页面加载完毕");
}
document.getElementById("btn").οnclick=function(){
    alert("按钮被点击");
}
document.οnmοusemοve=function(){
    console.log("鼠标在移动");
}

传统事件绑定方法的特点如下：

1. 事件名称之间一定要加上on，比如：onclick、onload、onmousemove。

2. 兼容主流的浏览器，包括低版本的IE。

3. 当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。

二、addEventListener()

方法事例：

window.addEventListener('load',init,false);
function init(){
    alert("页面加载成功");
}
// 下面写法与上面等价
window.addEventListener('load',function(){
    alert("页面加载成功");
},false);

浏览器兼容性： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。
addEventListener()方法特点：

1. element.addEventListener(event, function,
   useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认-
   事件句柄在冒泡阶段执行。

2. addEventListener()
   可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

3. addEventListener() 在绑定事件的时候，事件名称之前不需带 on 。

4. 注意该方法的兼容性，如果要兼容 IE6-8 ，不能使用该方法，可以采用以下方法。

5. 可以使用 removeEventListener() 来移除之前绑定过的事件。

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

三、attachEvent()

方法事例：

window.attachEvent('onload',function(){
    alert("页面加载成功");
});

attachEvent()方法特点：

1. attachEvent是 IE
   有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。
2. attachEvent()是 后绑定先执行。
3. 绑定时间时，attachEvent必须带 on，如 onclick，onmouseover 等

四、总结

• 在我们实际的项目里面，在使用原生js绑定事件的时候，大多数情况下会使用 addEventListener()
  ，因为目前来说很少有人使用低版本IE了，大多数项目不会要求兼容 IE6-8 。
• 如果项目要求兼容 IE6-8 ，这个时候可以考虑attachEvent()，但是不建议这样使用，这样的话需要些兼容代码，不仅繁琐而且容易出错，这个时候就建议使用jQuery库直接进行事件绑定，jQuery已经帮我们做好了兼容处理的工作，直接引用，提高效率。

五、原文作者

作者：振礼硕晨
链接：https://www.jianshu.com/p/2c2d0b8f210f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。