JQuery:所有按钮只使用一个监听器有什么缺点吗

JQuery: Are there any downsides of using only one listener for all buttons?

本文关键字：一个 监听器 什么 缺点 按钮 JQuery      更新时间：2023-09-26

我目前正在研究tictactoe的jquery实现，以便学习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>

在实现jquery逻辑时，我认为如果我只为所有这些按钮使用一个监听器会很好，因为它们都在做同样的事情，我这样做：

    $("button").on('click', function () {
  if(this.id==1||this.id==2||this.id==3||this.id==4||this.id==5||this.id==6||this.id==7||this.id==8||this.id==9){
        $("#"+String(this.id)).css("background-color",$("#color1").css('backgroundColor'));
        $("#"+String(this.id)).prop('disabled', true);
        //all the other logic here...
    }
    else if (this.id==startGame) {
      //start the Game
    }
});

我有三个问题：

  1. 性能呢？它比每个按钮使用一个监听器更糟糕吗？

  2. 这样实现听众是一种好的做法吗？

  3. 是否存在任何不利因素（例如，可能会出现一些奇怪的错误）？

性能呢？它比每个按钮使用一个监听器更糟糕吗？

没有。

这样实现听众是一种好的做法吗？

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

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

与其他任何事情相比都不一样。

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

// Delegation for the number buttons
$("#container-for-the-game").on("click", "button", function () {
    $(this).css("background-color", $("#color1").css('backgroundColor'))
           .prop('disabled', true);
    //all the other logic here...
});
// Start game separately, as it's unrelated
$("#startGame").on("click", function() {
    //start the Game
});

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

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

至

$(this)

注意事项：

  • id值已经是字符串，不需要在其上使用String(...)。

  • 你会有人告诉你不能使用全数字的id值。你可以，这很好，但请注意下一个要点。

  • 从技术上讲，#1等是无效的CSS选择器。jQuery可以容忍它们，前提是它们像那样独立（作为优化为getElementById调用而不是querySelectorAll的副产品），但CSS ID选择器不能以未加转义的数字开头。虽然$("#1")可以工作（与当前的jQuery一起工作），但$("#1 span")不能（找到一个span作为id"1"元素的后代）。最好避免这个习惯。

  • this已经是单击的按钮，因此不需要DOM查找。

  • 除非您将这些id值用于其他用途（我怀疑您可能是这样），否则您不需要它们。

在代码中附加单个侦听器的正确方法是类似

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

http://api.jquery.com/on/

在这里，您真正创建了一个监听器来处理您可能添加的所有当前和未来按钮。除了JQ必须检查匹配选择器的原始目标这一事实之外，性能上没有任何缺点。出于多种原因，这实际上是推荐的方法。

  1. 太多的听众会产生记忆问题
  2. 代码更易于维护和可读
  3. 您可以删除和添加按钮，而不必分离或附加新的事件侦听器

如果必须更具体地说明要绑定到哪些按钮，请在这些按钮中添加一个类，然后在on选择器中使用button.class。

希望这能帮助

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

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

相关文章：