好久没有使用过原生js中的监听方法,竟然发现有些陌生,几个方法之间的区别也有些混乱了。不过看过了API文档,又将他们之间的区别和用法理清楚了,这里进行总结。
一、传统事件绑定方法
我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法事例如下:window.onload=function(){alert("页面加载完毕");}document.getElementById("btn").onclick=function(){alert("按钮被点击");}document.onmousemove=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等