首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >我是否通过将‘an’调用绑定到更具体的东西来节省处理器时间?

我是否通过将‘an’调用绑定到更具体的东西来节省处理器时间?
EN

Stack Overflow用户
提问于 2012-08-27 16:40:11
回答 3查看 48关注 0票数 0

在这里寻找最佳实践。但我最近刚刚升级了一个应用程序,从jQuery 1.4升级到1.8,我正在慢慢地将所有live调用切换到on调用。

代码语言:javascript
代码运行次数:0
运行
复制
$(document).on('click', 'a.edit', function(){

来自:

代码语言:javascript
代码运行次数:0
运行
复制
$("a.edit").live(function() { 
  1. 将其绑定到更具体的东西而不是文档会更快吗?
  2. 这两个电话有速度上的差别吗?
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-08-27 16: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()而附加的所有单击处理程序!

它所做的基本上是:

代码语言:javascript
代码运行次数:0
运行
复制
$(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 !
    }
});
票数 4
EN

Stack Overflow用户

发布于 2012-08-27 16:50:47

为了对@adeneo的答案做一些扩展,

代码语言:javascript
代码运行次数:0
运行
复制
$(document).on('click','a.edit',function(){...});

将事件处理程序附加到文档。因为document是DOM的根,所以每个事件最终都会冒泡到document,除非在途中的某个时间点停止传播。

在您的示例中,这意味着每一次单击都将触发事件处理程序。然后,处理程序将检查event.target,以查看单击的源是否与所提供的选择器(在本例中为a.edit)匹配。考虑到click是网页上最常见的事件之一,这里将进行大量的处理。

委派事件时的最佳实践是在您使用事件处理程序所针对的元素中选择最接近的共同祖先(显然,该元素也必须在运行时存在,以便jQuery可以附加该处理程序)。这将减少不必要地触发事件处理程序的次数,并确保通过对.on的单个调用捕获所有目标元素。

票数 1
EN

Stack Overflow用户

发布于 2012-08-27 16:55:00

这两个方法之间没有速度差异,因为它们都需要检查单击的元素是否为a.edit --这将花费相同的时间。

但是,调用检查的次数不同--如果将侦听器附加到document,则每次单击都会触发。如果你用另一种方式去做的话,那就更常见了。

然而,关键的区别(无论速度)

代码语言:javascript
代码运行次数:0
运行
复制
$(document).on('click', 'a.edit', function(){

代码语言:javascript
代码运行次数:0
运行
复制
$('a.edit').on('click', function(){

第一个方法将click侦听器绑定到您以后可能创建的所有现有和未来的元素。第二种方法只将侦听器(仅)绑定到现有元素。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12146010

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档