Question

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

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

Answer 1

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

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

Answer 2

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

当你有很多要绑定的元素时，这也很好。如果您有一个包含1000个td元素的表，则可以对table进行单个事件绑定，而不是1000绑定到每个`td。

Answer 3

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

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

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

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

当一个元素动态添加到您的页面时，请使用Event Delegation，其中事件的正常绑定将不起作用。

性能问题会根据您的应用程序驱动程序的重要程度而发挥作用。如果该数字很小，性能应该无关紧要。但是，假设您在容器内的元素上有1000个点击事件。

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