JavaScript高級事件冒泡

我的大部分工作都是jQuery，但我正在爲即將到來的項目恢復「老派」js（要求 - 沒有JQUERY或其他庫 - 超出我的控制範圍，不要說「使用jQuery」）。我的範圍純粹是最新的瀏覽器，包括iOS Safari，不需要向後兼容。我正在尋找事件處理程序 - 我有一個想法可能很瘋狂，但我找不到任何相關的東西 - 可能是因爲它太瘋狂了。JavaScript高級事件冒泡

我試圖避免直接綁定事件元素，因爲我會經常用AJAX調用替換內容。
我目前的思路是將聽衆綁定到文檔上。看起來非常標準的做法。

但是，我可以跳過所有的事件冒泡嗎？我能否以某種方式告訴瀏覽器忘記它對事件冒泡的瞭解，並直接跳到文檔？我意識到，如果我這樣做，我將無法處理分配給父元素的事件，但我可以接受考慮項目範圍的情況，特別是如果它可以提高瀏覽器的熟練度。

來源

2012-10-16 Randy Hall

我可以綁定某種「包羅萬象」的函數到每個單獨的元素並停止傳播，然後將事件信息發送到文檔，但是那樣會破壞目的。 –

爲什麼要麻煩？它不會降低性能...... – Shmiddty

@Shmiddty：當然，它會降低性能，甚至不會很小！綁定單個處理程序不僅會縮小事件週期，而且問題還會提到來自AJAX調用的內容。綁定單個處理程序意味着：解析響應，附加處理程序，並_then_將其添加到DOM，但僅在檢查了DOM（如果有）元素從DOM中移除並解除綁定處理程序之後。與1個在_capturing_階段調用處理函數的監聽器相比，這需要更多的工作！ –

真的，跳過冒泡階段不是一種選擇。但由於您只是想支持現代瀏覽器，因此您可以簡單地捕獲頂部（document）級別的事件，並調用stopPropagation方法。
這樣的事件永遠不會下降到目標/ srcElement，而不會到達冒泡階段：

document.body.addEventListener('click',function(e) 
{ 
    e.stopPropagation(); 
    //handle event 
},true);//<-- true for capturing

更多關於拍攝與以往一樣，is to be found on quirksmode

來源

2012-10-16 14:29:05

非常好的解釋，並感謝您的鏈接。我沒有意識到事件處理程序在現代瀏覽器實現中「冒泡」之前就被「捕獲」了。 –

@RandyHall：總是樂於幫忙。我考慮過在鏈接頁面的標題_W3C model_下面粘貼ASCII圖表，以使其更加清晰，但我更願意給你整頁。只有一件事：處理程序沒有被捕獲，它是_event本身_。在捕獲階段，DOM和所有元素在事件觸發前的狀態下被「凍結」，處理函數允許您在實際執行之前操作該事件... –

我可以跳過所有的事件冒泡嗎？

否瀏覽器不提供這樣做的方法。

來源

2012-10-16 14:21:28 Quentin

JavaScript高級事件冒泡

回答

相關問題