Javascript JQuery：对所有按钮只使用一个侦听器有什么缺点吗？

为了学习jquery，我目前正在研究TictaToe的jquery实现。在我的html中，我定义了如下九个按钮：

<div class="container">
        <div class="column-center"><button id="1" style="width: 100px; height: 100px"></button></div>
        <div class="column-left"><button id="2" style="width: 100px; height: 100px"></button></div>
        <div class="column-right"><button id="3" style="width: 100px; height: 100px"></button></div>
    </div>
    <div class="container">
        <div class="column-center"><button id="4" style="width: 100px; height: 100px"></button></div>
        <div class="column-left"><button id="5" style="width: 100px; height: 100px"></button></div>
        <div class="column-right"><button id="6" style="width: 100px; height: 100px"></button></div>
    </div>
    <div class="container">
        <div class="column-center"><button id="7" style="width: 100px; height: 100px"></button></div>
        <div class="column-left"><button id="8" style="width: 100px; height: 100px"></button></div>
        <div class="column-right"><button id="9" style="width: 100px; height: 100px"></button></div>
    </div>

我这里有三个问题：

性能如何？它比为每个按钮使用一个侦听器更糟糕吗

这样实现侦听器是一种好的实践吗

是否存在任何不利因素（例如，可能会发生一些奇怪的错误）

---

像这样附加侦听器并没有坏处。相反，我觉得这很方便。它使代码更易于管理，将来您将能够更容易地识别和解决错误

---

您还可以在按钮中添加数据破折号属性或类，而不是使用通用按钮标记来附加事件。我认为您的部分代码可能会在将来产生bug。

像这样附加侦听器没有坏处。相反，我觉得这很方便。它使代码更易于管理，将来您将能够更容易地识别和解决错误

您还可以在按钮中添加数据破折号属性或类，而不是使用通用按钮标记来附加事件。我认为您的部分代码将来可能会产生bug

性能如何？它比为每个按钮使用一个侦听器更糟糕吗

没有

这样实现侦听器是一种好的实践吗

没关系，不过我会把数字按钮和其他按钮分开，因为它们实际上是不相关的。对于数字按钮，委派可能更好，在您的实现中有一些细节您可能会改进，但总体概念是好的

是否存在任何不利因素（例如，可能会发生一些奇怪的错误）

和其他任何事情一样

---

例如，我可能会这样看待它（假设游戏周围的容器中没有“开始游戏”按钮）：

上面有一个重要的变化，那就是我从

$("#"+String(this.id))

到

注意：

• id

  值已经是字符串，无需在其上使用

  String（…）

• 人们会告诉你不能使用全是数字的

  id

  值。你可以，这很好，但请注意下一个要点

• 从技术上讲，

  #1

  这是无效的CSS选择器。jQuery可以容忍它们，只要它们是独立的（作为优化到

  getElementById

  调用而不是

  querySelectorAll

  的副产品），但是CSS ID选择器不能以未替换的数字开始。虽然

  $（“#1”）

  可以工作（使用当前的jQuery），

  $（“#1 span”）

  不会工作（将

  span

  作为具有

  id

  “1”的元素的子体查找）。最好避免这种习惯

• 此

  已经是单击的按钮，因此不需要进行DOM查找

• 除非您将这些

  id

  值用于其他用途（我怀疑您可能是这样），否则您不需要它们

性能如何？它比为每个按钮使用一个侦听器更糟糕吗

没有

这样实现侦听器是一种好的实践吗

没关系，不过我会把数字按钮和其他按钮分开，因为它们实际上是不相关的。对于数字按钮，委派可能更好，在您的实现中有一些细节您可能会改进，但总体概念是好的

是否存在任何不利因素（例如，可能会发生一些奇怪的错误）

和其他任何事情一样

---

例如，我可能会这样看待它（假设游戏周围的容器中没有“开始游戏”按钮）：

上面有一个重要的变化，那就是我从

$("#"+String(this.id))

到

注意：

• id

  值已经是字符串，无需在其上使用

  String（…）

• 人们会告诉你不能使用全是数字的

  id

  值。你可以，这很好，但请注意下一个要点

• 从技术上讲，

  #1

  这是无效的CSS选择器。jQuery可以容忍它们，只要它们是独立的（作为优化到

  getElementById

  调用而不是

  querySelectorAll

  的副产品），但是CSS ID选择器不能以未替换的数字开始。虽然

  $（“#1”）

  可以工作（使用当前的jQuery），

  $（“#1 span”）

  不会工作（将

  span

  作为具有

  id

  “1”的元素的子体查找）。最好避免这种习惯

• 此

  已经是单击的按钮，因此不需要进行DOM查找

• 除非您将这些

  id

  值用于其他用途（我怀疑您可能是这样），否则您不需要它们

---

在代码中附加单个侦听器的正确方法如下

$('.container').on('click', 'button', listenerFn)

在这里，您可以真正创建一个侦听器来处理您可能添加的所有当前和将来的按钮。除了JQ必须检查原始目标以匹配选择器这一事实之外，性能上没有任何缺点。出于多种原因，这实际上是推荐的方法
• 太多的侦听器会产生内存问题
• 代码更易于维护和可读
• 您可以删除和添加不必分离或附加新事件侦听器的按钮
如果必须更具体地说明要绑定到哪些按钮，请向这些按钮添加一个类，然后在on选择器中使用

按钮.class

---

希望这有帮助
在代码中附加单个侦听器的正确方法如下

$('.container').on('click', 'button', listenerFn)

在这里，您可以真正创建一个侦听器来处理您可能添加的所有当前和将来的按钮。除了JQ必须chec这一事实之外，在性能上没有任何不利因素

$('.container').on('click', 'button', listenerFn)