Question

我目前正在研究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
    }
});

我在这里有三个问题：

性能如何比为每个按钮使用一个监听器更糟糕？
这样做是好的做法吗？
是否有任何缺点（例如可能发生一些奇怪的错误）？

Answer 1

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

没有

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

没关系，虽然我会将数字按钮从另一个中分离出来，因为它们实际上是无关的。对于数字按钮，委派可能更好，并且您的实现中可能有一些细节可能会改进，但整体概念很好。

是否有任何缺点（例如可能发生一些奇怪的错误）？

除此之外别无其他。

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

// 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值用于其他内容（我怀疑您可能是这样），否则您不需要它们。

Answer 2

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

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

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

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

太多的听众会产生内存问题。
代码更易于维护和阅读
您可以删除和添加无需分离或附加新事件监听器的按钮

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

希望这有帮助

Answer 3

没有像这样附加听众的缺点。相反，我发现它很方便。它使代码更易于管理，并且您将来可以更轻松地识别和解决错误。

您还可以在按钮中添加data-dash属性或类，而不是使用通用按钮标记来附加事件。我认为你的部分代码可能会在未来创建bug。

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

3 个答案: