blocks|key|217847|text|如果您想要添加更多的元素，并且让侦听器仍然工作而不再次添加它们，委托就会派上用场。也许您已经动态地创建了需要具有相同事件侦听器的元素。我不知道表演的答案。我很好奇别人怎么想！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|217848|在您的示例中，如果向.container添加了一个新按钮，则委托模型将允许侦听器工作。|offset|length|style|CODE|217849|entityMap^0|0|A|A|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Delegation comes in handy when you might want to add more elements and have the listeners still work without adding them again. Perhaps you have dynamically created elements that need to have the same event listeners. I don't know the performance answer. I'm curious what others think!

In your example, if you added a new button to <code>.container</code>, the delegate model would allow the listener to work.

blocks|key|3975866|text|当目标元素是动态的时，事件委托是最好的，这意味着它们在DOM就绪时不存在，或者它们的属性以改变处理程序应该处理事件的方式改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3975867|当您有很多元素要绑定时，它也是很好的。如果您有一个包含1000个td元素的表，则可以执行一个事件绑定到table，而不是1000个绑定到每个`+to。|offset|length|style|CODE|3975868|entityMap^0|0|W|2|1F|5|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Event delegation is best for when the targeted elements are dynamic, meaning they don't exist at DOM ready, or their attributes change in ways that change which handlers should handle events on them.

It is also good for when you have a lot of elements to bind to. If you have a table with 1000 <code>td</code> elements, you can do a single event binding to the <code>table</code>, instead of 1000 to bind to each `td.

blocks|key|1355462|text|这取决于容器中绑定的单击事件的数量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1355463|$(".container+button").on("click",+function(){});|code-block|syntax|javascript|1355464|如果只有少数几个事件发生，并且button已经出现在页面上，那么受上述签名约束的事件应该会为您完成工作。|offset|length|style|CODE|1355465|$(".container").on("click",+"button",+function(){});|1355466|当一个元素被动态地添加到您的页面时，那么使用Event+Delegation，其中事件的正常绑定将无法工作。|1355467|性能问题取决于应用程序的重事件驱动程度。如果这个数字很小，那么性能就不重要了。但是，假设在容器中的元素上有1000个单击事件。|1355468|是否为具有相同功能的所有公共元素创建一个单击。在这种情况下，您可以使用委托，其中事件将附加到单个元素，这会导致代码的可维护性降低和可读性增加。|1355469|entityMap^0|0|0|F|6|0|0|M|G|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

It depends on the number of click events that are bound inside the container.

<pre><code>$(".container button").on("click", function(){});
</code></pre>

If there are only a few events happening and the <code>button</code> is already on the page the event bound by above signature should do the work for you. 

<pre><code>$(".container").on("click", "button", function(){});
</code></pre>

When a element is dynamically added to your page then use <code>Event Delegation</code> wherein normal binding of events will not work.

The performance question comes into play based on how heavy event driven your application is.
Performance should not matter if that number is small. But lets say you have 1000 click events on the elements inside the container.

Would you create a click for all the common elements with the same functionality. In such cases you could use delegation, wherein the event will be attached to a single element, which can lead to less maintainable code and more readability.

When is it better (performance/readability/optimal) to use delegation instead of attaching the handler directly to the element in question?

<pre><code>$(".container").on("click", "button", function(){});
$(".container button").on("click", function(){});
</code></pre>

Event Handling Delegation or Direct

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

什么时候使用委托比直接将处理程序附加到相关元素更好(性能/可读性/最优)？$(".container").on("click", "button", function(){});$(".container button").on("click", function(){});

问事件处理委托或直接
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问事件处理委托或直接EN