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按照內層先外層後的順序觸發