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

时间:2011-12-26 04:44:32

标签: jquery javascript-events event-bubbling

我编写了一个示例JavaScript程序来演示jQuery函数clickdelegatelive的令人混淆的不同事件冒泡行为。

这是demo page

对于每个函数,包装器中都有包装器单击链接,这两个链接都是通过单击事件函数注册的。

我注意到了

  1. stopPropagationlive中使用delegate不会阻止事件冒泡
  2. livedelegate中,首先触发包装器中的click事件,然后触发单击链接。但是,click函数的顺序相反。
  3. 有谁可以解释这两种现象?

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

2 个答案:

答案 0 :(得分:2)

首先,live is deprecated支持jQuery 1.7+中的ondelegate。我现在停止使用live而不是以后。上面链接的文档实际上非常有用,并且很好地解释了这些函数的工作原理。

代表和生活都依赖于冒泡。这与他们的点击方式有何不同。这件事已经冒出来了。 Delegate优于live,因为您告诉它监视特定的父级,而实际的泡泡一直到文档级别。非常贵。

jQuery文档值得引用:

  

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

答案 1 :(得分:1)

如果您了解live和delegate的实现,那么您将理解这种差异的原因。实时和委托在某种程度上没有附加到元素,因为元素在绑定时不存在,它们分别附加到根或特定父元素,因此差异。并且它们使用事件冒泡,以便当从子项到根或它为新添加的元素执行的特定父项的事件气泡时,请参阅此博客条目以获取详细信息:

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