为什么“click”、“delegate”和“live”在使用 jQuery 的事件冒泡方面表现不同？答案

【问题标题】：Why "click","delegate" and "live" behave differently in terms of event bubbling using jQuery?为什么“click”、“delegate”和“live”在使用 jQuery 的事件冒泡方面表现不同？
【发布时间】：2012-01-27 19:28:24
【问题描述】：

我编写了一个示例 JavaScript 程序来演示 jQuery 函数 click、delegate 和 live 令人困惑的不同事件冒泡行为。

这里是demo page。

每个函数都有一个wrapper和一个click link在wrapper中，两者都注册了点击事件函数。

我注意到了

在live 和delegate 中使用stopPropagation 不会阻止事件冒泡
在live 和delegate 中，首先触发包装器中的点击事件，然后触发点击链接。但是，click 函数的顺序相反。

谁能解释这两种现象？

示例使用的是 jQuery 1.6.4，但您可以调整版本。

【问题讨论】：

jQuery doco for .live() 和 .delegate() 对此进行了解释 - 在发布问题之前您是否查看过文档？
我试过但发现有点难以理解...

标签： jquery jquery-events event-bubbling

【解决方案1】：

首先，live is deprecated 支持 jQuery 1.7+ 中的 on 和 delegate。我现在会停止使用live，而不是以后。上面链接的文档实际上信息量很大，并且很好地解释了这些功能的工作原理。

Delegate 和 live 都依赖于冒泡。这就是它们与点击的不同之处。事件已经浮出水面。 Delegate 优于 live，因为您告诉它监视特定的父级，而 live 气泡一直上升到文档级别。非常贵。

jQuery 文档值得在这里引用：

因为 .live() 方法在事件传播到文档的顶部，不可能停止传播现场活动。同样，由 .delegate() 处理的事件将传播分配给它们的元素；绑定的事件处理程序 DOM 树中它下面的任何元素都已经被执行到调用委托的事件处理程序时。这些处理程序，因此，可能会阻止委托处理程序触发调用 event.stopPropagation() 或返回 false。

【讨论】：

【解决方案2】：

如果您了解 live 和 delegate 的实现，那么您就会了解造成这种差异的原因。 Live 和 delegate 以某种方式不附加到元素，因为在绑定时元素不存在，它们分别附加到根或特定父级，因此存在差异。他们利用事件冒泡，因此当事件从子节点冒泡到根节点或特定父节点时，它会为新添加的元素执行此博客条目以获取有关此内容的详细视图：

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

【讨论】：