事件处理委托或直接答案

【问题标题】：Event Handling Delegation or Direct事件处理委托或直接
【发布时间】：2013-08-11 16:28:11
【问题描述】：

什么时候使用委托而不是直接将处理程序附加到相关元素会更好（性能/可读性/最佳）？

$(".container").on("click", "button", function(){});
$(".container button").on("click", function(){});

【问题讨论】：

【解决方案1】：

当您可能想要添加更多元素并让侦听器在不再次添加它们的情况下仍然工作时，委托会派上用场。也许您已经动态创建了需要具有相同事件侦听器的元素。我不知道性能的答案。我很好奇别人怎么想！

在您的示例中，如果您向.container 添加了一个新按钮，则委托模型将允许侦听器工作。

【讨论】：

【解决方案2】：

这取决于容器内绑定的点击事件的数量。

$(".container button").on("click", function(){});

如果只有少数事件发生并且button 已经在页面上，则上述签名绑定的事件应该为您完成工作。

$(".container").on("click", "button", function(){});

当元素被动态添加到您的页面时，请使用Event Delegation，其中无法正常绑定事件。

性能问题取决于您的应用程序的事件驱动程度。如果这个数字很小，性能应该无关紧要。但是假设您在容器内的元素上有 1000 个点击事件。

您会为所有具有相同功能的常见元素创建一个点击吗？在这种情况下，您可以使用委托，其中事件将附加到单个元素，这会导致代码的可维护性降低和可读性提高。

【讨论】：

【解决方案3】：

事件委托最适合目标元素是动态的，这意味着它们在 DOM 就绪时不存在，或者它们的属性以改变哪些处理程序应该处理它们的事件的方式发生变化。

当您有很多要绑定的元素时，它也很有用。如果您有一个包含 1000 个 td 元素的表，您可以将单个事件绑定到 table，而不是 1000 来绑定到每个 `td。

【讨论】：