关于addEventListener和attachEvent的初步探讨

关于addEventListener和attachEvent

 

IE不对应addEventListener，只能使用attachEvent，所以首先需要判断你的浏览器对应的是哪个事件函数

 

if (window.addEventListener) {//for W3C DOM

  window.addEventListener("load",HTMLArea.initOther, false);

} else if (window.attachEvent) {//for IE

  window.attachEvent("onload",initOther);

} else  {

  window.onload= initOther;

}

 

接下来，让我们回到事件函数上来。

假设你想在窗口被加载的时候执行一个initOther的函数。

通常，我们会这么做

function initOther () {

  //do something 

}

window.onload =initOther;

 

但是，如果你的onload事件已经绑定了其他的方法，那么你绑定的那个方法就不会再被执行了。

比如：当你在绑定了initOther()方法之后另外在body上绑定了initMain()方法的话，initMain()方法就不会被执行！

<bodyonload="initMain()">...</body>

 

我们希望的是这两个函数都被绑定到onload事件上，那么我们应该怎么做呢？

对，就是使用window.addEventListener/window.attachEvent方法

if (window.addEventListener) {//for W3C DOM

  window.addEventListener("load",HTMLArea.initOther, false);

} else if (window.attachEvent) {//for IE

  window.attachEvent("onload",initOther);

} else  {

  window.onload= initOther;

}

 

这里有个重点：

1． 当使用window.addEventListener的时候。

可以绑定多个方法，它们是有顺序的。根据你代码中add…的顺序来定。

2． 当使用window.attachEvent的时候。

你也可以绑定多个方法，但是IE很调皮，他会随机选定执行顺序。

 

细心的人会发现window.addEventListener的方法注册变量有3个。

第一个是要注册的事件名

第二个是要绑定的方法

那么第三个是什么呢？

 

探讨一下

这个参数叫做useCapture ，是一个boolean值，就是true orfalse。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false。而会有影响的情形是目标元素(target element)有祖先元素(ancestorelement)，而且也有同样的事件对应函数，

 

我们来想象一下，架设有一大一小2个箱子，大箱子是红色的，小箱子是蓝色的。小箱子套在大箱子里面。形成父子关系。再假设他们都设定有click事件，一碰就会动。

那么，如果我在蓝色小箱子上click不只会触发蓝色小箱子的click 事件，还会同时触发红色大箱子上的click事件，而useCapture这个参数就是在控制这时候两个click事件的先后顺序。

 

如果是false，那就会使用bubbling，他是从内而外的流程，所以会先触发蓝色小箱子的click事件再执行红色大箱子的click事件，如果是true，那就是capture，和bubbling相反是由外而内，会先执行红色大箱子的click事件才执行蓝色小箱子的click事件。

 

那如果不同层的元素使用的useCapture不同呢？

就是会先从最外层元素往目标元素寻找设定为capture的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling的事件。

(转自：冷月听雨声)