40
最後的錯誤是什麼？謝謝。爲什麼在這個簡單的addEventListener函數後使用'false'？
window.addEventListener('load', function() {
alert("All done");
}, false);
A
回答
10
據MDC，第三個參數是：
將useCapture
如果true，useCapture表明用戶希望 開始捕獲了。啓動 捕獲後，指定 類型的所有活動將在DOM樹是 分派到任何EventTarget小號 下方之前被分派到 註冊listener。 通過樹向上冒泡的事件將 不觸發指定爲 的偵聽器使用捕獲。有關詳細說明，請參閱DOM Level 3 Events 。
-6
它確定事件是否被捕獲。
更多信息here
178
我檢查MDN太多，但我還是不明白什麼useCapture是對，所以這個答案是爲那些誰還不在檢查的正式文件後得到它。
所以首先，以下在發生幾乎所有的browers：
在所有的瀏覽器，除了IE < 9，有事件處理的兩個階段。
這項活動首次下降 - 這就是所謂的捕捉，然後泡了。這種行爲在W3C規範中是標準化的。
這意味着無論您將useCapture設置爲，這兩個事件階段總是存在。
此圖顯示了它的工作原理。
根據這個模型中，事件：
捕獲向下 - 通過1 - > 2 - > 3.
氣泡向上 - 通過3 - > 2 - > 1
然後出現你的問題。名爲useCapture的第三個參數表示您希望處理程序處理事件的兩個階段中的哪一個。
useCapture = true處理程序設定在捕獲階段。活動會在得到它的孩子之前得到它。
useCapture = false。該處理程序設置在冒泡階段。活動將在得到其子女後得到。
這意味着，如果你寫這樣的代碼：
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
，first方法將被second之前調用。
默認情況下，useCapture標誌設置爲假這意味着你處理只會事件冒泡階段時被調用。
+7
非常好，全面的答案。我比現在更瞭解這一點。 – 0x499602D2 2014-08-31 14:19:24
+10
非常好的解釋。人情味，這是什麼使差異。 – 2015-04-28 00:54:56
+1
我很欣賞這個解釋。 – neilsimp1 2016-04-08 13:21:59
1
@ Libra的答案非常好，只是碰巧有些像我這樣的人更好地理解代碼與機器的交互。
所以下面的腳本應該解釋事件傳播。 我試圖做這個基礎是description schema：
以下事件流下來，上了以下層次：
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
爲了簡單起見，我們將開始在身體下到span元素註冊捕獲階段的處理程序，並返回到冒泡階段註冊處理程序的主體元素。 所以結果將是節點從節點開始到結束所採取的方向。 請點擊片段的右側面板上的「顯示控制檯」訪問日誌
function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */
if (e.eventPhase == Event.CAPTURING_PHASE){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if (e.eventPhase == Event.AT_TARGET){
console.log("at target phase :\n actual node : "+this.nodeName);
}
if (e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName);
}
}
/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/
arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];
/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener(ev, handler, bool)
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener); p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}<section ID="sectionID">
<div id="DivId">
<p id="PId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
</p>
</div>
</section>注意的事件，如重點不冒泡，這使得SENS他仍然多數事件做泡沫。
相關問題
- 1. 爲什麼這個addEventListener函數失敗？
- 2. 爲什麼這個簡單的onclick函數不起作用
- 3. 這個簡單的回調函數爲什麼不起作用？
- 4. 爲什麼這個簡單的函數不會返回值？
- 5. 爲什麼這個簡單的cpp函數版本較慢？
- 6. 在addEventListener中爲false？
- 7. 爲什麼numba在這個簡單的總結上這麼快？
- 8. 爲什麼在這個JavaScript狀態機中，這個簡單的函數不能在這個對象上運行？
- 9. 爲什麼在這個簡單的NSOutlineView數據源中EXC_BAD_ACCESS？
- 10. C＃爲什麼使用CultureInfo.InvariantCulture這樣一個簡單的任務
- 11. 爲什麼這個調用導致無限循環的簡單幫助函數？
- 12. 爲什麼gcc不會編譯這個調用free（）函數的簡單代碼？
- 13. 爲什麼這個簡單的陳述如此簡單？
- 14. 這個簡單的NodeJS加密函數有什麼問題？
- 15. 什麼導致這個簡單的函數繪製不佳？
- 16. 這個簡單的函數有什麼錯？
- 17. 這個簡單的vim函數有什麼問題？
- 18. 爲什麼這個簡單的「確認」javascript函數意外行爲
- 19. 爲什麼instanceof使用帶參數的構造函數爲單例返回false？
- 20. 這個簡單的更新爲什麼這麼慢運行？
- 21. 這個簡單的haskell算法爲什麼這麼慢？
- 22. 這個簡單的Z3證明爲什麼這麼慢？
- 23. 爲什麼在這個R代碼中使用stringsasFactors = FALSE？
- 24. 爲什麼不在這裏使用[]函數的重載函數？
- 25. 爲什麼這個函數被調用？
- 26. 爲什麼這個函數被調用？
- 27. 爲什麼不調用這個函數？
- 28. 爲什麼在這種簡單的情況下使用閉包？
- 29. 爲什麼這兩個javascript調用addEventListener有不同的結果
- 30. 爲什麼這個簡單的NSPredicate過濾我的數組
我不知道這麼多關於JavaScript，所以我有麻煩得到這個答案。我其實不知道什麼是useCapture？請你告訴我一些關於它的事情。 – 2014-01-10 06:25:58
@BikashChandraMondal查看下面的答案。 – libra 2014-11-20 03:21:17
請解釋一下，不要只是複製/粘貼。 – 2016-07-26 22:58:53