Jquery 事件滴流

Question

有什么方法可以让 jquery 事件在 DOM 中向下流动并向上冒泡吗？

我正在尝试实现一个“创建”事件，该事件在将节点添加到 dom 时触发。我发现了一些实现，但所有实现都有一个共同点，那就是插入元素的根触发创建事件，但没有一个是子元素。如果用例是为节点提供“构造函数”函数，那么创建事件需要应用于所有新节点，不是吗？

例如，如果我插入一个包含一些列表项的无序列表。对于所有方法，我发现 ul create 事件都会触发，但 li 事件不会触发。

我最好的想法是以某种方式绑定(bind)事件的滴流阶段，以便事件从 ul 开始，它们滴入所有 li 中。

由于系统的其余部分使用 jquery 事件，我想保持这种方式，但纯 js 解决方案也可以。

我现在也只真正关心 webkit，因此任何解决方案都不必是 IE 安全的。

谢谢

@戴夫:

如果我在这里错了，有人纠正我，但据我了解:所有事件(IE 中的少数事件除外)首先“冒泡”到你的 dom 树上；所以从li到ul再到body，然后转身“滴流”回来；从 body 到 ul 到被单击的 li 以及 li 的任何子级。

在大多数浏览器中，您可以通过将 addEventListener 的第三个参数设置为 true 来监听“trickling”事件(但我认为 IE 的 AttachEvent 没有该选项)。

我们同时存在冒泡和涓流，主要是因为在互联网诞生时，对于如何完成它存在一些困惑，而 w3c 只是在其规范中采用了这两种方法，以使每个人都满意并保持良好的向后兼容性。随着时间的推移，trickling 已经被逐步淘汰，因为它在大多数情况下毫无用处，这就是为什么我认为 jquery 没有任何选择。在我看来，“创建”事件是滴流有用的奇怪情况之一。诀窍是如何集成创建事件的触发，然后使其流入 jquery，以保持浏览器兼容性和我们喜欢的 bind()/trigger() jquery API...

Answer 1

我将在这里发布答案，而不是在评论中讨论。

首先，没有事件会低于事件目标。根据 w3c 的说法，该事件分为三个阶段:捕获、达到目标和冒泡。因此，如果有人点击 UL，事件就会发生:

BODY > DIV > UL (capturing)
UL (at target)
UL > DIV > BODY (bubbling)

(它也超越了 body )。这里值得注意的是，这与绑定(bind)事件的元素无关。您可以将单击事件绑定(bind)到 DIV，并且该事件将以相同的方式传播。事件目标不一定是绑定(bind)事件的元素(即 currentTarget)。

捕获和冒泡阶段都通过同一组元素，只是在两个不同的方向。所以你可以看到它更像是一个回调订单。

如果将回调绑定(bind)到捕获标志设置为“true”的事件，则仅意味着此回调将在气泡中的任何其他事件回调之前执行。

因此，如果您的“特殊”事件在插入 DOM 内容时触发，您可以:

1. 确保事件冒泡
2. 将插入的 DOM 最内部的元素作为事件目标

这样，您就可以监听来自容器元素的事件，并且仍然确保插入的 DOM 中的所有元素都是气泡的一部分。