js的事件触发

js有一种事件触发，格式为：

dom.addEventListener("事件",函数,true/false)

因而，就产生了一下问题，见例子：

 

<div id="outDiv">
<div id="middleDiv">
    <div id="inDiv">请在此点击鼠标。</div>
</div>
</div>

<div id="info"></div>

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

 

 

到底，我单击inDiv的时候会先触发那个呢？

咱们知道，最后一个参数是用来决定函数的触发是用冒泡仍是事件捕获来触发的。（true为事件捕抓）

因而通过测试，先后触发顺序以下：

•全为 false 时，触发顺序为：inDiv、middleDiv、outDiv；

•全为 true 时，触发顺序为：outDiv、middleDiv、inDiv；

•outDiv 为 true，其余为 false 时，触发顺序为：outDiv、inDiv、middleDiv；

•middleDiv 为 true，其余为 false 时，触发顺序为：middleDiv、inDiv、outDiv；
详细出处参考：http://www.jb51.net/article/42862.htm

 

最后获得以下结论：

1，true比false先触发

2，true按照外层先内层后的顺序触发

3，false按照内层先外层后的顺序触发