Question

自

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

等效于使用.live（）编写的以下代码：

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

我打赌我错了，但写作不一样

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

那么，.delegate()是什么？

Answer 1

live()的工作方式是将处理程序放在DOM（文档）的顶层，检测所选事件何时冒泡到该级别（然后检查它是否被抛出与您的选择器匹配的元素。

delegate()的工作方式相同，但处理程序放在您选择的元素上（因此它只能检测该元素的后代抛出的事件）。

live()的缺点是1）检测和检查冒泡到文档级别的所有事件所固有的性能问题，以及2）您无法在这些事件上完全停止传播的事实（从在达到文档级别之前，你不会知道它们。）

delegate()通过让您将处理程序约束到较小的元素集（与您的选择器及其后代匹配的元素）而不是整个页面来缓解这两个问题。

Answer 2

.live()会在document上收听，其中.delegate()会侦听更多本地元素，在这种情况下会监听<table>。

他们都采取相同的行动来聆听事件的泡沫，而.delegate()之前的事件只是在被抓住之前减少气泡。

你的例子：

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

不一样，因为它再次将事件处理程序附加到document而不是<table>，因此.delegate()用于更多本地元素，在大多数方面效率更高。虽然它仍然使用.live()。

另请注意，$(selector)会检索元素，因此$("table td")在使用.live()时无理由选择了一堆元素，其中$("table").delegate()选择< em>仅 <table>个元素，所以即使最初它没有运行选择器并丢弃结果也更有效。

Answer 3

文档：

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，.delegate（）处理的事件将始终传播到它们被委派给的元素;下面任何元素上的事件处理程序将在调用委托事件处理程序时执行。