jQuery:live() 与 delegate()

发布于 2024-10-03 07:11:04 字数 177 浏览 0 评论 0原文

我在我的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

恋你朝朝暮暮 2024-10-10 07:11:04

.live() 要求您立即运行选择器,除非您使用结果是非常浪费的。这里的事件处理程序附加到 document,因此必须检查来自任何冒泡元素的该类型的所有事件。这是一个用法示例:

$(".myClass").live("click", function() { alert("Hi"); });

请注意,语句 $(".myClass") 运行该选择器来查找具有该类的所有元素即使我们不关心它们,我们想要的只是当点击事件冒泡到时匹配稍后的字符串“.myClass”文档


.delegate() 实际上使用 .live() 内部,但具有上下文。选择器不会立即运行,因此它已经更加高效,并且它不会附加到文档(尽管它可以),它更加本地化......以及所有这些其他来自您不关心的其他元素树的事件在冒泡时甚至不会被检查......再次更加高效。这是一个用法示例:

$("#myTable").delegate("td", "click", function() { alert("Hi"); });

现在这里发生了什么?我们运行 $("#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 to document, so all event of that type from any elements bubbling must be checked. Here's a usage example:

$(".myClass").live("click", function() { alert("Hi"); });

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 when click events bubble up to document.


.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 to document (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:

$("#myTable").delegate("td", "click", function() { alert("Hi"); });

Now what happened here? We ran $("#myTable") to get the element to attach to (admittedly more expensive than document, but we're using the result. Then we attach an event handler to that (or those in other cases) elements. Only clicks from within that element are checked against the "td" selector when they happen, not from everywhere like .live() does (since everything is inside document).

空名 2024-10-10 07:11:04

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.

悲念泪 2024-10-10 07:11:04

来自 jQuery 文档:

从 jQuery 1.7 开始,.live() 方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应优先使用 .delegate() 而不是 .live()。

http://api.jquery.com/live/

From jQuery Documentation:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

http://api.jquery.com/live/

半步萧音过轻尘 2024-10-10 07:11:04

实时方法:

$("#mymethod").live("click", function() { alert("It checks the entire DOM"); });

实时方法检查整个 DOM 中的#mymethod(有时根据您的 DOM 内容需要时间)

委托方法:

$('.mycontainer').delegate('#mymethod','click',function() { alert('Checks only in mycontainer portion') });

Delagate 不会搜索您的整个 DOM,它仅在您的 mycontainer 部分中搜索。(提高性能)

Live Method:

$("#mymethod").live("click", function() { alert("It checks the entire DOM"); });

Live Method Checks #mymethod in Entire DOM (Sometimes it will take time based on your DOM Contents)

Delegate Method:

$('.mycontainer').delegate('#mymethod','click',function() { alert('Checks only in mycontainer portion') });

Delagate does not search your whole DOM it searches only in your mycontainer portion.(Improve Performance)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文