Question

我想知道在哪里附加javascript点击监听器的最佳做法是什么。即，事件监听器应该放在容器上还是放在各个按钮上？

e.g。示例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上附加事件监听器吗？

有什么优点和缺点。

感谢。

Answer 1

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

Answer 2

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

它更容易
每个人都使用它
您无需输入检查单击按钮的额外代码
没有理由不这样做

没有人在父级上应用事件处理程序。我认为没有理由这样做，从来没有看到任何代码那样做，而且我从未想过这样做。

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

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

Answer 3

我的简化答案我们看起来像这样

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

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

事件监听器应该放在容器上还是放在各个按钮上？

3 个答案: