jquery - 事件处理委托或直接

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 个点击事件。

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