詳解addEventListener的三個參數之useCapture

addEventListener 有三個參數：第一個參數表示事件名稱（不含on，如"click"）；第二個參數表示要接收事件處理的函數；第三個參數為useCapture，本文就講解它。

複製代碼代碼如下:

<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);

上述是我們測試的代碼，根據info 的顯示來確定觸發的順序，有三個addEventListener，而useCapture 可選值為true 和false，所以2*2*2，可以得出8 段不同的程序。

•全為false 時，觸發順序為：inDiv、middleDiv、outDiv；

•全為true 時，觸發順序為：outDiv、middleDiv、inDiv；

•outDiv 為true，其他為false 時，觸發順序為：outDiv、inDiv、middleDiv；

•middleDiv 為true，其他為false 時，觸發順序為：middleDiv、inDiv、outDiv；

•……

最終得出如下結論：

•true 的觸發順序總是在false 之前；

•如果多個均為true，則外層的觸發先於內層；

•如果多個均為false，則內層的觸發先於外層。

以上就是本文的全部內容了，希望大家能夠喜歡。