原⽣js中的事件监听⽅法
好久没有使⽤过原⽣ js 中的监听⽅法，竟然发现有些陌⽣，⼏个⽅法之间的区别也有些混乱了。不过看过了API⽂档，⼜将他们之间的区别和⽤法理清楚了，这⾥进⾏总结。
⼀、传统事件绑定⽅法
我们在学习的时候，最初接触的事件绑定⽅式⼤多是传统事件绑定⽅法。传统事件绑定⽅法事例如下：
alert("页⾯加载完毕");
}
alert("按钮被点击");
}
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> 元素添加事件句柄
// 移除 <div> 元素的事件句柄
三、attachEvent()
⽅法事例：
window.attachEvent('onload',function(){
alert("页⾯加载成功");jquery是什么有什么作用
});
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已经帮我们做好了兼容处理的⼯作，直接饮⽤，提⾼效率。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。