jQuery:live() 与 delegate()
我在我的 Web 应用程序中使用 jQuery。在阅读其文档时,我阅读了有关 live()
和 delegate()
的内容。虽然他们解释了这两种方法,但我不明白它们之间的确切区别。也不确定哪种方法在哪种情况下是理想的。
请帮助我清楚地了解这些方法。
谢谢
I'm using jQuery in my web application. While reading its documentation I read about live()
and delegate()
. Although they have explained both methods, I don't understand the exact difference between them. Also not sure about which method is ideal in which scenario.
Please help me to get clear understanding of these methods.
Thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
.live()
要求您立即运行选择器,除非您使用结果是非常浪费的。这里的事件处理程序附加到document
,因此必须检查来自任何冒泡元素的该类型的所有事件。这是一个用法示例:请注意,语句
$(".myClass")
运行该选择器来查找具有该类的所有元素即使我们不关心它们,我们想要的只是当点击
事件冒泡到时匹配稍后的字符串
。“.myClass”
文档.delegate()
实际上使用.live()
内部,但具有上下文。选择器不会立即运行,因此它已经更加高效,并且它不会附加到文档
(尽管它可以),它更加本地化......以及所有这些其他来自您不关心的其他元素树的事件在冒泡时甚至不会被检查......再次更加高效。这是一个用法示例:现在这里发生了什么?我们运行
$("#myTable")
来获取要附加的元素(诚然,比document
更昂贵,但我们使用然后我们将一个事件处理程序附加到该元素(或其他情况下的元素),仅根据“td”<检查该元素内的
点击
。 /code> 选择器发生时,而不是像.live()
那样从任何地方选择(因为一切都在文档)。
.live()
requires you run the selector immediately, unless you're using the result it's very wasteful. The event handler here is attached todocument
, so all event of that type from any elements bubbling must be checked. Here's a usage example:Note that the statement
$(".myClass")
ran that selector to find all elements with that class even though we don't care about them, all we wanted was the string".myClass"
to match later whenclick
events bubble up todocument
..delegate()
actually uses.live()
internally, but with a context. The selector is not run immediately, so it's more efficient already, and it doesn't attach todocument
(though it can) it's much more local...and all those other events from other element trees you don't care about are never even checked when bubbled...again more efficient. Here's a usage example:Now what happened here? We ran
$("#myTable")
to get the element to attach to (admittedly more expensive thandocument
, but we're using the result. Then we attach an event handler to that (or those in other cases) elements. Onlyclicks
from within that element are checked against the"td"
selector when they happen, not from everywhere like.live()
does (since everything is insidedocument
).delegate() 映射到 jQuery 代码中的 live()。主要区别在于,live() 是在您希望将事件委托给不同元素的元素上调用的。 live() 会将这些事件委托给 document 对象。
另一方面,delegate() 允许您通过传递选择器来设置将哪些元素事件委托给哪些元素。如果原始元素与选择器匹配,则处理冒泡到该元素的事件。
正如 @NickCraver 提到,delegate() 执行比 live 更好,因为它不一定捕获页面上每个元素的事件,并且它不会立即查询选择器。
delegate() maps to live() in the jQuery code. The main difference is that live() is called on an element for which you wish to delegate the events to a different element. live() will delegate these events to the document object.
delegate(), on the other hand allows you to set which element events are delegated to by passing a selector. Events that bubble up to that element are handled if the originating element matches the selector.
As @NickCraver mentioned, delegate() performs better than live because it doesn't necessarily capture events from every element on the page, and it doesn't query the selector right away.
来自 jQuery 文档:
http://api.jquery.com/live/
From jQuery Documentation:
http://api.jquery.com/live/
实时方法:
实时方法检查整个 DOM 中的#mymethod(有时根据您的 DOM 内容需要时间)
委托方法:
Delagate 不会搜索您的整个 DOM,它仅在您的 mycontainer 部分中搜索。(提高性能)
Live Method:
Live Method Checks #mymethod in Entire DOM (Sometimes it will take time based on your DOM Contents)
Delegate Method:
Delagate does not search your whole DOM it searches only in your mycontainer portion.(Improve Performance)