「涓流」定製JavaScript事件

我正在研究JavaScript中的自定義事件。「涓流」定製JavaScript事件

根據MDN，使用自定義事件構造，存在使事件「冒泡」（默認爲false）的選項：

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#CustomEventInit

實施例：

// add an appropriate event listener 
obj.addEventListener("cat", function(e) { process(e.detail) }); 

// create and dispatch the event 
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}); 
obj.dispatchEvent(event);

我在jsfiddle上進行測試：

http://jsfiddle.net/ppx4gcxe/

泡泡起來功能似乎工作。但是我希望我的自定義事件能夠「涓流」，即便是觸發了關於子元素的監聽器;相反的是冒起來。

我隱約記得一些默認的瀏覽器事件「流下來」。這被認爲是瀏覽器早期的爭論點之一。

無論如何，有什麼辦法讓我的自定義事件的這個功能？當然，任何相對簡單直接的方式。我真的不想編寫一個函數來遍歷所有子元素，並手動觸發它們上的任何偵聽器。我希望有另一種方式。

來源

2014-09-24 Rolf

您正在查找的行爲稱爲event capturing（與event bubbling相反）。您可以通過傳入true作爲addEventListener的第三個參數來啓用event capturing。

參見：http://jsfiddle.net/zs1a6ywo/

注：event capturing未在IE 8或下方支承。

欲瞭解更多信息，請參閱：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

來源

2014-09-24 02:34:34

謝謝。儘管起初它聽起來像是正確的答案，但它並不完全是我想要的。我的代碼是「two」，「one」，你的代碼是「one」，「two」。我想要的結果是「兩個」，「四個」。無論如何，無論如何，這聽起來很複雜，在我看來，最簡單的解決方案是一個自定義的「事件總線」，我可以將偵聽器和自定義事件掛鉤。 – Rolf 2014-09-24 02:57:58

@Rolf啊，我的壞。 – 2014-09-24 03:47:41

@Rolf你是不是想讓'four'成爲'two'的孩子？無論哪種方式，它是否適合你在使用'event capture'時將事件綁定到'document.querySelector（'＃2 *'）'？這會打「一」，「二」和「四」。然後，您可以檢查處理程序的內部，以查看「event.target」是否爲「event.currentTarget」的父項。如果是這樣，那麼該事件是「有效的」。如果不是，它是「無效」，應該被忽略。那會讓你只有兩個和四個。 – 2014-09-24 03:52:51

「涓流」定製JavaScript事件

回答

相關問題