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/

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

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

＆＃34;涓滴＆＃34;自定义JavaScript事件

1 个答案: