事件侦听器应该放置在容器上还是单个按钮上？答案

【问题标题】：Should the event listener be placed on the container or on the individual buttons?事件侦听器应该放置在容器上还是单个按钮上？
【发布时间】：2013-03-12 00:31:55
【问题描述】：

我想知道在何处附加 javascript 点击侦听器的最佳做法是什么。即事件监听器应该放置在容器上还是单个按钮上？

例如示例html：

<div id="content">
    somecontent blah blaoh
    <button class="button1"></button>
    <button class="button2"></button>
    blah blah blah
    <table></table>
    more content...
</div>

1) 如果我将点击监听器放在#content 上，那么当我点击该 div 中的任何内容时，该事件将触发。所以然后在事件处理程序中，我可以查看单击目标的类并执行正确的行为。 2) 还是应该直接在 .button1 和 .button2 上附加事件监听器？

有什么优缺点等

谢谢。

【问题讨论】：

标签： javascript javascript-events onclick

【解决方案1】：

我的简化答案是这样的

<div id="container1" onClick="doAction1()">
  <button id="A" class="buttonA" onClick="doActionA()"></button>
  <button id="B" class="buttonB" onClick="doActionB()"></button>
</div>

简而言之，我将为按钮 A 和 B 使用容器，以防我需要为两个事件触发相同的公共事件，并直接设置它们的本地事件。至少对我来说，检查混入事件并不方便。

【讨论】：

谢谢。我认为这是最有意义的。

【解决方案2】：

如果您想在单击 .button1 和 .button2 时执行不同的操作，请为每个按钮分配单独的事件处理程序以避免检查目标。如果您在单击任一按钮时执行相同的操作，您可以将事件处理程序分配给 div 但是此时您确实需要质疑为什么您有两个按钮。

【讨论】：

【解决方案3】：

直接将其附加到按钮上。优点：

更容易
每个人都在使用它
您不需要添加额外的代码来检查被点击的按钮
没有理由不

没有人将事件处理程序应用于父级。我认为没有理由这样做，也从未见过任何这样做的代码，而且我从未想过要这样做。

但是，有一个小建议：在按钮上使用 id 而不是类，因为向它们添加事件处理程序会更容易。

如果您有更具体的问题或有理由在父级上使用事件处理程序，请将其放在评论中。

【讨论】：