jQuery：live() 与 delegate()

Question

我在我的网络应用程序中使用jQuery。在阅读其文档时，我了解到了live()和delegate()。虽然他们已经解释了这两种方法，但我不明确它们之间的确切区别。同时也不确定在哪种情况下使用哪种方法更理想。

请帮助我清楚地了解这些方法。

谢谢

- Chinmayee G

---

一个简洁的总结: JQuery -- live vs delegate。 - Tim

除了下面的答案，读者可能想要查看这篇非常好的文章，解释了bind、live和delegate之间的区别。 - Jon

Answer 1

.live()需要立即运行选择器，否则会非常浪费资源。这里的事件处理程序附加到document，因此必须检查来自任何元素冒泡的该类型的所有事件。以下是一个使用示例：

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

请注意，语句$(".myClass")运行了选择器来查找所有具有该类的元素，即使我们不关心它们，我们想要的只是在后面匹配字符串".myClass"，以便在click事件冒泡到document时使用。

---

.delegate() 实际上内部使用 .live()，但使用了一个上下文。选择器不会立即执行，因此它已经更加高效，并且没有连接到 document（尽管可以这样做），所以更加本地化...并且那些来自其他元素树的其他事件在冒泡时甚至不会被检查...再次提高了效率。以下是使用示例：

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

现在发生了什么？我们运行 $（“＃myTable”） 来获取要附加到的元素（比 document 显然更昂贵，但我们正在使用结果）。 然后我们附加一个事件处理程序到那个（或其他情况下的那些）元素。只有从该元素内部发生的 clicks 会被检查是否符合“ td”选择器，而不是像 .live（）一样来自 everywhere （因为 everything 都在 document 中）。

- Nick Craver

---

很好的解释，直播对我总是有一种奇怪的气味。将处理程序限制在您关心的部分中会更好。 - Ruan Mendes

查看一些性能基准测试 https://dev59.com/W3E85IYBdhLWcg3wnU4d#7692651 - Watermark Studios

Answer 2

delegate() 在 jQuery 代码中等同于 live()。两者的主要区别在于你希望将事件委托到不同元素时，需要在一个元素上调用 live()，live() 将把这些事件委托给 document 对象。

而 delegate() 允许你通过传递选择器来设置将事件委托给哪个元素。如果起始元素与选择器匹配，则处理冒泡到该元素的事件。

正如 @NickCraver 在 stackoverflow 上提到的那样，delegate() 比 live() 更好，因为它不一定会捕获页面上的每个元素的事件，并且它不会立即查询选择器。

- Andy E

Answer 3

来自jQuery文档：

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

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

- juque

Answer 4

实时方法：

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

实时检查整个DOM中的#mymethod方法（根据您的DOM内容，有时需要一些时间）

委托方法：

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

委托不会搜索整个DOM，它只会在你的mycontainer部分中搜索。（提高性能）

- Vicky