attachEvent 与addEventListener到底有什么区别呢?总结如下:
一、适应的浏览器版本不同
attachEvent方法适用于IE addEventListener方法适用于FF
二、针对的事件不同
attachEvent中的事件带on 而addEventListener中的事件不带on
三、参数的个数不同
attachEvent方法两个参数:第一个参数为事件名称,第二个参数为接收事件处理的函数; addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数是一个bool值,一般为false
第三个参数叫做useCapture,是一个boolean值,就是true or false,如果送出true的话就是瀏览器会使用Capture方式,false的话是Bubbling,只有在特定状况下才会有影响,通常建议是false,而会有影响的情形是目标元素(target element)有祖先元素(ancestor element),而且也有同样的事件对应函数,我想,看图会比较清楚。
像这张图所显示的,我的范例有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发红色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture,和bubbling相反是由外而内,会先执行红色元素的click事件才执行蓝色元素的click事件。附上两个范例,capture和bubbling,两个档案只有差在此一参数不同,可以发现事件的发生顺序不一样了。
那如果不同层的元素使用的useCapture不同呢?就是会先从最外层元素往目标元素寻找设定为capture的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling的事件。
四、执行事件的优先级不同
<div >下面提供全部代码,您可以更改其中的 true、false 值,来进行测试。注意,不适用于 IE
五、对this的引用不同
attachEvent绑定的函数,没有绑定this引用
- function doIt(){
- alert(this);
- }
首先做一个按钮:<button >