一、传统事件绑定方法
我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法事例如下:
window.οnlοad=function(){
alert("页面加载完毕");
}
document.getElementById("btn").οnclick=function(){
alert("按钮被点击");
}
document.οnmοusemοve=function(){
console.log("鼠标在移动");
}
传统事件绑定方法的特点如下:
-
事件名称之间一定要加上on,比如:onclick、onload、onmousemove。
-
兼容主流的浏览器,包括低版本的IE。
-
当同一个元素绑定多个事件时,只有最后一个事件会被添加,并且传播模式只能是冒泡模式。
二、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()方法特点:
-
element.addEventListener(event, function,
useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认-
事件句柄在冒泡阶段执行。 -
addEventListener()
可以给同一个元素绑定多个事件,不会发生覆盖的情况。如果给同一个元素绑定多个事件,那么采用先绑定先执行的规则。 -
addEventListener() 在绑定事件的时候,事件名称之前不需带 on 。
-
注意该方法的兼容性,如果要兼容 IE6-8 ,不能使用该方法,可以采用以下方法。
-
可以使用 removeEventListener() 来移除之前绑定过的事件。
// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
三、attachEvent()
方法事例:
window.attachEvent('onload',function(){
alert("页面加载成功");
});
attachEvent()方法特点:
- attachEvent是 IE
有的方法,它不遵循W3C标准,而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener,所以实际开发中需分开处理。 - attachEvent()是 后绑定先执行。
- 绑定时间时,attachEvent必须带 on,如 onclick,onmouseover 等
四、总结
- 在我们实际的项目里面,在使用原生js绑定事件的时候,大多数情况下会使用
addEventListener()
,因为目前来说很少有人使用低版本IE了,大多数项目不会要求兼容 IE6-8 。 - 如果项目要求兼容 IE6-8 ,这个时候可以考虑
attachEvent()
,但是不建议这样使用,这样的话需要些兼容代码,不仅繁琐而且容易出错,这个时候就建议使用jQuery库直接进行事件绑定,jQuery已经帮我们做好了兼容处理的工作,直接引用,提高效率。
五、原文作者
作者:振礼硕晨
链接:https://www.jianshu.com/p/2c2d0b8f210f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。