jQuery中的Bind()、Live()、委托()和…()之间的差异的详细解释。
简介许多Web开发人员最近在jQuery中了解了很多关于绑定()(.)(.)(.)和()()方法的知识。这些疑问通常是关于它们之间的真正区别以及何时使用它们。接下来,我们将详细介绍这四种方法之间的区别,并详细介绍每种方法。如果你不多说,让我们详细介绍一下。
在深入了解这些方法之前,我们首先介绍一个常用的HTML作为我们用来编写jQuery示例方法的示例。
作者
jQuery的核心领导
美国波士顿
使用绑定方法
的。绑定()方法注册事件类型和事件处理函数直接到选定的DOM元素。这种方法已被用于最长,这一次它解决各种跨浏览器的问题中。当它被用于连接的事件处理函数,它仍然是非常简洁的,但也有一些性能问题,将列在下面。
(方法)/方法事件类型和直接注册到DOM元素的事件处理程序在。
单击()方法只是简单地绑定()方法。
* /
$(#成员李(点击)。Bind函数(e){ });
$(#成员李(点击)功能(e){ });
的。绑定()方法将事件处理函数的所有匹配的标签。这不是一个好办法。这样做,不仅在所有匹配元素的隐式迭代附加事件处理功能,并且操作非常浪费(过剩),因为相同的事件处理程序的重复一遍又一遍地添加到所有匹配的标签。
优势:
适用于各种浏览器
连接事件处理功能非常方便快捷。
单击()、悬停()和其他简写方法可用于连接事件处理功能的更多方面。
对于一个简单的ID选择器,绑定()方法不仅可以快速连接事件处理程序,而且当事件被触发时,事件处理程序几乎立即被调用。
缺点:
该方法将所有的事件处理函数的所有匹配的元素
无法动态匹配同一选择器的元素
在处理大量匹配元素时会出现性能问题。
额外的操作是在更早完成的,这可能会在页面加载时导致性能问题。
使用活的方法
活的。()方法使用事件委托的概念来实现其所谓的魔术。你这样叫过()方法是调用Bind()方法方便。然而,在这种表面的生活,()方法是从不同的former.the.live()方法将选择器事件与事件处理功能相关文档的根元素的信息(即文件)。通过注册文件的事件信息,这个事件处理函数会让泡沫文件调用它的所有事件(如代表和传播事件)。一旦有事件冒泡到文档元,jQuery将决定哪些事件处理函数必须调用基于选择因素或事件的元数据,如果事件处理函数的存在。这些额外的工作会对用户交互的性能有一定的影响,但初始化注册事件的过程是很快的。
将与处理函数事件的方法相关联的选择器和事件信息附加到文档根元素(文档)中。
(#成员李点击)。
$(#成员李(点击)。生活功能(e){ });
绑定()比上面的绑定()方法的示例有优势。它的优点是只将事件处理程序附加到文档元素,而不是多次。这不仅速度更快,而且减少了性能的浪费。然而,这种方法的使用也会带来许多问题,下面将列出这些问题。
优势:
所有事件处理函数只注册一次,而不是多次注册作为绑定()。
将绑定()方法升级到Live()方法是非常方便的,您只需要将绑定替换为Live
动态添加到DOM的元素也会令人惊叹,因为真正的事件信息是在文档元素上注册的。
在加载文档之前,您可以连接事件处理函数,这可以帮助您更好地利用可能不使用的时间。
缺点:
这个方法已经在jQuery 1.7之后被放弃,并且您应该在代码中逐渐放弃它。
使用此方法时,链操作不受适当的支持,可能会出现一些错误。
匹配操作基本上没用,因为它只用于在文档元素上注册事件处理函数。
使用的event.stoppropogation()方法将是无用的,因为事件总是被赋予文档元素
因为所有的选择器或事件的信息添加到文档中的元素,所以一旦有一个事件调用事件处理程序,jQuery将大量的元数据来决定哪一个事件处理程序将被调用的存储使用matchesselector方法,如果这个函数是可用的。
因为您连接的事件总是委托给文档,如果您的DOM级别非常深,这可能会导致一些性能问题。
使用委托方法
委托()方法类似于Live()方法。它不将选择器或事件信息附加到文档,但允许您指定其他元素。就像Live()方法一样,该方法使用事件委托正确工作。
如果跳过前一种方法的引入,您可能不得不返回并重新审视它,因为这涉及到前面描述的一些内部逻辑。
/ *。委托()方法将选择器和事件信息(李和点击)添加到您的指定元素(#成员)。
* /
$(#成员),委托(李
的。委托()方法是非常强大的。在上面的例子中,选择和事件的事件处理函数的相关信息将被附加到元素(#成员),这是比生活更有效(),因为生活()方法总是将选择器和事件的事件处理函数相关联的文件的元信息。此外,该代表()方法是用来解决许多其他的问题,请参考以下细节。
优势:
您可以选择将选择器或事件信息附加到指定的元素。
匹配操作实际上不在前面执行,而是用于注册指定的元素。
连锁经营可以得到正确的支持。
jQuery仍然需要迭代这些选择器或事件信息来匹配元素,但是因为您可以选择哪个元素是根元素,所以过滤的数量将大大减少。
因为这项技术使用事件委托机制,它可以匹配动态添加到DOM中的元素。
在加载文档之前,您可以连接事件处理函数。
缺点:
不能直接升级绑定()方法到委托()方法。
jQuery仍然需要用marchesselector方法选择和选择的事件处理函数会被调用,在选择或事件附加到指定的根元素的信息。然而,连接到指定的根元素的元数据比使用时的生活小得多()方法。
在处理大量匹配元素时会出现性能问题。
额外的操作是在更早完成的,这可能会在页面加载时导致性能问题。
使用on方法
你知道,在jQuery 1.7版本,结合(),()。生活,代表()方法只需要使用。对()的方式在一个调用它们的方法。当然,Unbind()、()和死亡。undelegate()方法是相同的。代码段是从jQuery 1.7版本的源代码截获
函数(类型,数据,FN){
返回this.on(类型、空数据,FN);
},
Unbind:功能(类型,FN){
返回this.off(类型、空,FN);
},
活:函数(类型,数据,FN){
jQuery(这个背景),(类型、this.selector,数据,FN);
返回此;
},
模具:函数(类型,FN){
jQuery(这个背景)。关(类型、this.selector | | **,FN);
返回此;
},
委托:函数(选择器,类型,数据,FN){
返回this.on(类型、选择器、数据,FN);
},
undelegate:功能(选择类型,FN){
返回arguments.length = = 1
This.off(选择器,**):
This.off(类型选择器,FN);
}
考虑到这一点,使用下面的方法如下所示…
jQuery(.)/(.)和.委托()方法只需要使用上()方法来调用它们。
绑定
$(#成员李(点击)。,功能(e){ });
$(#成员李(点击)。Bind函数(e){ });
/活
$(文档)。
$(#成员李(点击)。生活功能(e){ });
委托
$(#成员),(单击
$(#成员),委托(李
你可能已经注意到我是如何使用的,()来确定如何调用其他方法。你可以认为,()方法是由不同的签名,这些方法的重载,实现事件绑定不同的连接方式。出现的。在()方法的API带来多方面的一致性,并希望让事情不那么混乱。
优势:
使各种事件绑定方法一致。
因为在jQuery源代码中,Bind()、Live()和委托()方法实际上调用这个方法,因此它简化了jQuery代码库并删除了第一级重定向。
这种方式仍然提供了使用委托()方法的优点,如果需要的话,它仍然提供了绑定()方法的支持。
缺点:
对于该方法的实际执行方式将根据您如何调用方法进行更改,存在一些疑问。
总结
如果您对不同的绑定事件方法感到困惑,请不要担心,因为API已经开发了一段时间,许多以前的经验可以用来参考。还有很多人把这些方法视为魔术,但一旦您了解了它们工作背后的原则,它将帮助您了解如何更好地处理该项目。
以下是本文的精髓。
绑定()方法的使用非常浪费,因为它将相同的事件处理函数附加到每个匹配的元素中。
您应该停止使用Live()方法,因为它被丢弃,而且存在很多问题。
当您需要解决一些性能问题并处理动态添加的元素时,使用委托()方法将给您带来许多好处。
新的.上()方法实际上是由Bind()、Live()和委托()来模拟的语法糖,这取决于您如何调用它。
新的方向是使用新的. .()方法.熟悉语法并开始在所有jQuery 1.7版本中使用它。
你对上面列出的利弊有新的补充吗您最近开始使用委托()方法了吗你怎么看待新方法把你的想法写在评论里,告诉我,谢谢。
第一次翻译,文章可能会出现一些流畅的地方,希望得到大家的理解,毕竟我还是个学生啊!
嗯,可能是这样。以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问,您可以留言交换。谢谢您一直鼓励我。
文本链接