".delegate()和live()有什么区别？"

Question

自从

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

等同于使用.live()编写的以下代码：

$("table").each(function(){
    $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
    });
});

根据jQuery API。我打赌我错了，但是这不是写作方式相同吗？

$("table td").live('hover', function() {});

那么，.delegate() 是用来做什么的？

- Rodrigo Souza

---

可能是 [jQuery: live() vs delegate()] 的重复问题 (https://dev59.com/_2855IYBdhLWcg3wrGZY)。 - Patrick McElhaney

Answer 1

live()的工作原理是将处理程序放置在DOM（文档）的顶层，以检测您选择的事件何时冒泡到该级别（然后检查它是否由与您的选择器匹配的元素抛出）。 delegate()的工作方式相同，但处理程序放置在您选择的元素上（因此只能检测由该元素的后代抛出的事件）。 live()的缺点是：1）检测和检查所有冒泡到文档级别的事件固有的性能问题；2）您无法完全停止这些事件的传播（因为直到它们到达文档级别之前，您都不会知道它们存在）。 delegate()通过让您将处理程序限制为一组较小的元素（与您的选择器匹配的元素及其后代），而不是整个页面，来缓解这两个问题。

- Jacob Mattison

Answer 2

.live() 方法监听整个 document，而 .delegate() 方法则监听一个更局部的元素，比如在这种情况下是 <table> 元素。

它们都以相同的方式监听事件冒泡，只是 .delegate() 方法在被捕获之前冒泡的层数较少。

你的例子：

$("table td").live('hover', function() {});

这并不相同，因为它再次将事件处理程序附加到document而不是<table>，所以.delegate()更适用于更局部的元素，在大多数方面效率更高...虽然它仍然在内部使用.live()。

---

还要记住，$(selector)检索元素，因此$("table td")选择了一堆没有好处的元素，当使用.live()时，而$("table").delegate()仅选择只有<table>元素，因此即使最初也通过不运行选择器和丢弃结果来提高效率。

- Nick Craver

---

在选择相应的元素时，是否可以在Chrome开发者工具中查看事件监听器？ - Rodrigo Souza

尽管使用.each()方法时，$("table td").live('hover', function() {});是相同的，不是吗？ - Rodrigo Souza

在你使用.delegate()的元素上，你可以在它的.data("events")对象或者$.cache[element[$.expando]].events中看到它，其中elemenet[$.expando]是你在元素上看到的jquery230420498204824=132，那个132是$.cache中的键，所以$.cache[132].events就是你要找的对象。 - Nick Craver

@Rodrigo - 不是的，它在每个循环中都会在document上附加一个新的处理程序。 - Nick Craver

但是 $("table td").live('hover', function() {}); 会为每个选定的元素附加一个新的处理程序，不是吗？ - Rodrigo Souza

@Rodrigo - 不是的，它将单个处理程序附加到“文档”，以侦听调用.live()方法的jQuery对象中的“.selector”（“table td”）...这是不必要选择所有这些元素的低效部分。 - Nick Craver

Answer 3

文档：

.live() 方法处理事件时，一旦它们传播到文档的顶部，就无法停止传播。同样，由 .delegate() 处理的事件将始终传播到它们被委托的元素；在它下面的任何元素上的事件处理程序在委托事件处理程序被调用时已经执行完毕。

- MatTheCat