在这里寻找最佳实践。但我最近刚刚升级了一个应用程序,从jQuery 1.4升级到1.8,我正在慢慢地将所有live
调用切换到on
调用。
$(document).on('click', 'a.edit', function(){
来自:
$("a.edit").live(function() {
发布于 2012-08-27 08:44:27
现在,将事件委托给文档意味着,当单击文档中的所有元素时,都会触发事件处理程序,然后检查目标是否与a.edit
匹配,这是大量的检查。将其缩小到更接近a.edit
的元素将意味着激发事件处理程序的元素较少,检查是否与指定目标匹配的元素也较少。
来自jQuery 文档:
不再建议使用.live()方法,因为jQuery的后期版本提供了更好的方法,这些方法没有缺点。特别是,在使用.live()时会出现以下问题: jQuery试图在调用.live()方法之前检索选择器指定的元素,这在大型文档上可能很费时。不支持链接方法。例如,$("a").find(".offsite,.external").live( .)是无效的,不能按预期工作。由于所有.live()事件都附加在document元素中,因此在处理它们之前,事件会采取尽可能长、最慢的路径。在事件处理程序中调用event.stopPropagation()在停止附加在文档中较低的事件处理程序方面是无效的;该事件已经传播到文档。.live()方法以令人惊讶的方式与其他事件方法交互,例如,$(document).unbind(" click ")删除通过调用.live()而附加的所有单击处理程序!
它所做的基本上是:
$(document).click(function(e) {
if (e.target == ourElement) {
//hey, our element was clicked and bubbled all the way to the root,
//so let's do something
}else{
//we just jumped through some hoops, but this is not the element we
//are looking for, so do nothing...and we do this on every click !
}
});
发布于 2012-08-27 08:50:47
为了对@adeneo的答案做一些扩展,
$(document).on('click','a.edit',function(){...});
将事件处理程序附加到文档。因为document
是DOM的根,所以每个事件最终都会冒泡到document
,除非在途中的某个时间点停止传播。
在您的示例中,这意味着每一次单击都将触发事件处理程序。然后,处理程序将检查event.target
,以查看单击的源是否与所提供的选择器(在本例中为a.edit
)匹配。考虑到click
是网页上最常见的事件之一,这里将进行大量的处理。
委派事件时的最佳实践是在您使用事件处理程序所针对的元素中选择最接近的共同祖先(显然,该元素也必须在运行时存在,以便jQuery可以附加该处理程序)。这将减少不必要地触发事件处理程序的次数,并确保通过对.on
的单个调用捕获所有目标元素。
发布于 2012-08-27 08:55:00
这两个方法之间没有速度差异,因为它们都需要检查单击的元素是否为a.edit
--这将花费相同的时间。
但是,调用检查的次数不同--如果将侦听器附加到document
,则每次单击都会触发。如果你用另一种方式去做的话,那就更常见了。
然而,关键的区别(无论速度)
$(document).on('click', 'a.edit', function(){
和
$('a.edit').on('click', function(){
第一个方法将click
侦听器绑定到您以后可能创建的所有现有和未来的元素。第二种方法只将侦听器(仅)绑定到现有元素。
https://stackoverflow.com/questions/12146010
复制