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

标签 javascript events dom

我正在研究 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/

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

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

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

最佳答案

您正在寻找的行为称为 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

关于javascript - "Trickle-down"自定义JavaScript事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26006523/

相关文章:

javascript - 如何在纯JS中的一行后插入一组表行

objective-c - Imageview 的 "touch area rect"在动画移动到其他地方后仍然保留

javascript - 为什么 Javascript addEventListener 会更改对象指针的范围?

javascript - 使用javascript从HTML获取文本

javascript - Ajax 请求无法回调

javascript - 这段代码有什么问题? (JavaScript 对象)

javascript - Galleria 图片库淡入淡出和默认图片问题

javascript - 简单的 JavaScript 日期选择器错误?

javascript - 在不使用 HTML 的情况下将参数传递给 javascript onclick

javascript - 如何在创建 dom 节点之前找到它的尺寸?