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

Question

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

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

Answer 1

绑定的事件处理程序绑定.live到document.绑定的事件处理程序绑定.on到您指定的元素.这意味着您可以减少事件冒泡到将接收它的元素所花费的时间,这也意味着您可以停止传播(.live因为它已经到达文档,所以不可能).

该.on方法还允许您对所有事件处理程序使用单个方法 - .live将始终委托事件处理程序,而.on只有在将选择器作为第二个参数传递时才会委托.没有一个,它将绑定到匹配的元素集.

jQuery文档中列出了更多缺点:

• jQuery在调用.live()方法之前尝试检索选择器指定的元素,这在大型文档上可能很耗时.

• 不支持链接方法.例如, $("a").find(".offsite, .external").live( ... );无效并且无法按预期工作.

• 由于所有.live()事件都附加在文档元素上,因此事件在处理之前会采用最长和最慢的路径.

• 在移动iOS(iPhone,iPad和iPod Touch)上,对于大多数元素,click事件不会冒泡到文档正文,并且不能与.live()... 一起使用

• 调用event.stopPropagation()事件处理程序对于停止附加在文档中较低位置的事件处理程序是无效的; 该事件已经传播到文档.

• 该.live()方法以令人惊讶的方式与其他事件方法交互,例如,$(document).unbind("click")删除通过任何调用附加的所有点击处理程序.live()!

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

附注 - 所有事件绑定方法都.on()在引擎盖下调用,因此用于.on()满足所有事件处理需求是有意义的.不要打扰像这样的快捷方式.click(); 你可以从1.7.2来源看到他们所做的就是打电话.on:

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