jQuery live方法有什么问题?
live()
方法在jQuery 1.7中被弃用。 jQuery文档现在推荐
使用
.on()
附加事件处理程序。 老版本的jQuery用户应该优先使用.delegate()
..delegate()
.live()
。
我了解如何和delegate
工作,但我不明白为什么他们更好。 live()
更简单,更易于使用。
live
被弃用是否有一个原因? 其他方法如何更好? 如果我继续使用live
会有什么不好的事情发生吗?
看到这里的一些解释:
http://www.ultimatewebtips.com/why-jquery-live-is-a-bad-option-to-use/(网站似乎被closures)
引用:
-
您不能使用
.live()
作为可重用的小部件。 -
.stopPropagation()
不适用于live。 -
.live()
较慢。 -
.live()
不可链接。
.on()
更进一步的美妙之.on()
在于它能够很好地简化所有的事件: http : .on()
呃,你知道api链接,看看.on()
是如何工作的:)
引用:
.on()方法将事件处理程序附加到jQuery对象中当前选定的一组元素。 从jQuery 1.7开始,.on()方法提供了附加事件处理程序所需的全部function。 有关从较旧的jQuery事件方法转换的帮助,请参阅.bind(),.delegate()和.live()。 要删除与.on()绑定的事件,请参阅.off()。 要附加只运行一次然后自行删除的事件,请参阅.one()
live()
效率低下有两个原因:
- 在构造
$('selector').live()
,jQuery首先必须select所有元素。 然而,当调用live()
,它只需要jQuery对象的select器(存储在.selector
),而实际上并不使用任何选定的元素。 因此,首先select所有匹配的元素,然后不使用它们是有点浪费的。on()
和delegate()
将目标select器作为参数 ,这意味着事先没有select目标元素,只有在触发事件时才进行testing。 -
live()
默认绑定在document
级别,因此所有的事件都需要通过整个DOM来冒泡。 你可以通过用$(selector, context).live()
指定一个上下文来缩小它的范围,但是最好使用on()
或者delegate()
。
在编写新代码时,强烈build议使用最新最好的on()
而不是delegate()
和不赞成使用的live()
。 不过,我不认为live()
支持很快就会被删除(如果有的话),因为如此多的脚本依赖它。 另外,在on()
使用live()
没有什么实际的缺点,因为在jQuery源码本身中, live()
被定义为:
live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }
live
方法有两个主要问题:
-
它将所有事件处理程序都附加到文档级别,因此任何冒泡到文档的事件都必须与所有实时事件的事件types和select器进行匹配。 如果你有很多的事件,页面将会很慢。 您应该使用
delegate
或限制您检查事件的范围。 -
该方法的使用对于库中其他方法如何使用select器并不常见。 您只能在使用select器创build的jQuery对象上使用它。
delegate
和方法使得这个自然,当你提供select器的方法。
live()
将处理程序附加到文档,这基本上导致拦截所有types的事件,导致search与select器匹配的元素的成本。 如果使用delegate()
和on()
,build议附加更接近预期的目标(如果可能的话,直接在父目录中),从而缩小处理事件的数量,并分别search匹配的目标。
我相当肯定这是由于.live()
的性质。 这是很方便的,但这是一个不好的做法,因为它会迫使你的浏览器在大多数情况下search更多的事件,然后需要。
而不是默认search整个文件的某个事件,search一个特定的容器是更有效的数据。
live()
的确使用起来很方便,而且大多数os没有注意到使用它的任何缺陷。 这在我眼中基本上是一个改进的bind()
。
但是在很多时候,我们必须适应并且更清楚我们的代码需要执行什么。
这就像问自己为什么要input东西,为什么不是在开始的时候input所有东西。
以下是Paul Irish关于live()性能和限制的详细文章 。
如果你继续使用live
,那么你的代码不能再工作了,如果你升级项目的jQuery库。
$('some selector').live(' ... ', handler)
是相同的
$(document).on(' ... ', 'some selector', handler)
所以当你使用live
你实际上把所有的处理器都分配到你的DOM树的根目录下。 这有两个缺点:
- 将处理程序附加到DOM根目录会增加事件在遍布时所经过的path。 这会对性能造成不良影响。
- 其他一些处理程序
return false
风险会增加,从而阻止live
处理程序的启动。