“涓滴”自定义 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传递给 来启用。trueaddEventListener

请参阅： http: //jsfiddle.net/zs1a6ywo/

注意：event capturingIE 8 或更低版本不支持。

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