javascript - "Trickle-down"自定义JavaScript事件

Question

我正在研究 JavaScript 中的自定义事件。

根据 MDN，使用 CustomEvent 构造函数，有一个选项可以使事件“冒泡”(默认为 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/

并且冒泡功能似乎有效。但我希望我的自定义事件“涓涓细流”，即触发子元素上的监听器；与冒泡相反。

我隐约记得一些默认的浏览器事件“涓涓细流”。这应该是早期浏览器时代的争论点之一。

无论如何，有没有办法在我的自定义事件中获得这个功能？当然，任何相对简单直接的方式。我真的不想编写一个函数来遍历所有子元素并手动触发它们上的任何监听器。我希望有另一种方式。

Answer 1

您正在寻找的行为称为 event capturing (与 event bubbling 相反)。您可以启用 event capturing通过传入 true作为 addEventListener 的第三个参数.

见:http://jsfiddle.net/zs1a6ywo/

注意:event capturing IE 8 或更低版本不支持。

更多信息，请参阅:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener