jquery - 为什么 jQuery 的 "on"比 "live"更好

Question

我发现越来越多的开发人员现在使用 $('#element-id').on() 方法而不是 $('#element-id').live () 方法。

为什么？ live 方法没有什么？

Answer 1

与.live绑定(bind)的事件处理程序被绑定(bind)到文档。使用 .on 绑定(bind)的事件处理程序将绑定(bind)到您指定的元素。这意味着您可以减少事件冒泡到将接收它的元素所需的时间，并且还意味着您可以停止传播(对于 .live 是不可能的，因为它已经达到了文档)。

.on 方法还允许您对所有事件处理程序使用单一方法 - .live 将始终委托(delegate)事件处理程序，而 .on 仅当您传递选择器作为第二个参数时才会委托(delegate)。如果没有，它将绑定(bind)到匹配的元素集。

jQuery docs 中列出了更多缺点:

• jQuery attempts to retrieve the elements specified by the selector before calling the .live() method, which may be time-consuming on large documents.

• Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.

• Since all .live() events are attached at the document element, events take the longest and slowest possible path before they are handled.

• On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live()...

• Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document.

• The .live() method interacts with other event methods in ways that can be surprising, e.g., $(document).unbind("click") removes all click handlers attached by any call to .live()!

出于所有这些原因，您应该始终使用.on()而不是.live()。如果您坚持使用旧版本的 jQuery(1.7 以下)，您可以使用 .delegate() 代替。

<小时/>

旁注 - 所有事件绑定(bind)方法都会在底层调用 .on()，因此使用 .on() 是有意义的满足您所有的事件处理需求。不要为像 .click() 这样的快捷方法而烦恼；你可以从1.7.2 source看到他们所做的就是调用 .on:

return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);