Question

Here说

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

与

相同

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

但我认为它也与

相同

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

因此方法委托是浪费，对吧？

Answer 1

它没有说相同。

它表示等效，这意味着生成的功能将是相同的，但不是它的工作方式。

注意这部分

说明：将处理程序附加到一个处理程序所有元素的更多事件匹配选择器，现在或在未来， 基于一组特定的根元素 。

Answer 2

最大的区别（我认为）是live()将事件处理程序附加到window元素。而delegate()将处理程序绑定到您应用方法的元素。

所以理论上，delegate()应该更快，特别是对于更深层次的嵌套结构，因为事件不必冒泡整个DOM树。

现在自jQuery 1.4以来，如果使用live()，处理程序将绑定到上下文节点，默认情况下为window。因此

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

（上下文节点明确设置为this，引用table）不等于

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

在后一个示例中，处理程序将绑定到window。

所以delegate()与第一个例子的效果相同，代码更简单，因此更易于理解。

Answer 3

您的示例实际上是完美的，用于解释为什么委托实际上不浪费以及为什么应该使用委托。

假设你有一张10x10的桌子。如果在每个td上使用bind，则将100个事件处理程序附加到文档。委托是一种更有效的方法，因为您只是将单个事件处理程序附加到文档中。

.bind()，.live()和.delegate()不仅仅是彼此的同义词。虽然它们似乎实现了类似的东西，但每个都有它的位置。您提供的示例的正确工具是.delegate()。

.delegate()有时会感觉像.live()，因为它也可能适用于将来创建的元素，但它的工作方式不同。在您的示例中，事件处理程序附加到<table>本身。如果<td>更改，则事件处理程序仍将在表上触发，然后查看哪个<td>为'悬停'，即使它不存在处理程序创建时。因此.delegate()会影响自设置处理程序以来创建的新<td>，但不会影响自设置处理程序以来创建的新表。

我希望这有用。

Answer 4

这取决于。如果该委托被其他人使用，那么封装和重用是有意义的。如果代码可以在另一个时间使用另一个委托，那么你应该保留它。但是，如果没有，则KISS principle很有用。

委托方法是否浪费？

4 个答案: