是否有关于何时在 JQuery 中使用事件委托与事件处理的经验法则？答案

【问题标题】：Is there a rule of thumb for when to use event delegation vs event handling in JQuery?是否有关于何时在 JQuery 中使用事件委托与事件处理的经验法则？
【发布时间】：2009-07-20 02:01:20
【问题描述】：

我对何时应该使用事件委托而不是开箱即用的 JQuery 事件处理感到困惑。

我总是很想使用事件处理程序，因为它在 JQuery 中非常简单：

例如：

$("button#submit").click(function () { 
      $(this).css("disabled", "true");
    });

事件委托的编写其实并没有那么复杂：

$("button#submit").live("click", function() {
      $(this).css("disabled", "true");
});

但它看起来并不那么直观。

是否有关于何时使用事件委托的简单经验法则？我想我不太明白它的意义。

【问题讨论】：

标签： javascript jquery event-delegation

【解决方案1】：

当您将动态添加元素到需要分配该事件的页面时，请使用 .live()。（注意 .live() 仅适用于选择器）

在所有其他情况下使用 .click()（或任何其他事件）

【讨论】：

yarr...认为这很明显。
即使我没有添加元素，我仍然会使用 .live 或更好的手动事件委托。如果我只有 1 个，为什么还要有 100 个 dom 事件。

【解决方案2】：

您应该在以下情况下使用事件委托：

当您想要跨多个元素处理同一事件时，例如如果您有一个包含许多行的数据表，使用委托将使用更少的内存并且比为每行注册一个事件处理程序更快。
当页面加载后元素被动态添加到页面并且您想要处理这些新元素的事件时，例如向数据表中添加行。

Using Event Utility and Event Delegation to Improve Performance 对此进行了更多讨论（尽管文章使用了 YUI，但这些想法仍然适用）。

【讨论】：

很好的答案，谢谢。为什么要使用社区 wiki？只是好奇。
我一般默认启用社区 wiki，以防万一有人想整理。
我明白了。我以为你拒绝了我们基于等级的奖励和激励的社会制度。无论如何，谢谢你的链接。很棒的文章。

【解决方案3】：

根据this，当有很多绑定元素时，一切都与速度有关。

【讨论】：

【解决方案4】：

我发现我尽可能使用 live。这样以后如果我添加动态内容，我根本不需要更改代码。

【讨论】：

警惕 .live。过多的现场活动也会影响性能。
我总是检查性能，还没有出现现场伤害我的情况。
您是否检查过 30 个 .live 监听器与标准事件委托相比的性能。
没有。我敢肯定不会有那么多。 30 是从哪里开始崩溃的？第一个变慢的浏览器是什么？ IE6？