Javascript ES6类/面向对象和事件处理程序

我一直在学习JavaScript和面向对象/函数式编程的来龙去脉，而不是编写那些虽然有效但却丑陋且效率低下的命令式代码

我正在重新编写一个tic-tac-toe游戏，并且正在使用类来实现“Board”功能（更新Board/检查tiles/等等）

我意识到……我到底应该把事件监听器（按钮/瓷砖等）放在页面的什么地方。我通常只是将jquery

。单击
文档中的
函数。就绪

范围，但这似乎不正确

当我用

new

创建一个类时，事件侦听器是否会被附加或“准备就绪”…我想可能是我不理解侦听器是如何工作的。它们是否作为函数/方法在类中工作？或者如果把它们连在一起有意义的话

例如，这里是我现在的基类（它实际上是刚刚设置好的，所以它就像是裸最小值

"use strict";

class Board
{
   constructor(playerIcon,compIcon) { 
        this.playerIcon = playerIcon;
        this.compIcon = compIcon;
});
    }

    getTileContents(tile){
      return $("#tile-" + tile).text()
    }

    tileIsEmpty(tile){
        console.log($("#tile-" + tile).text())
      if($("#tile-" + tile).text() != 'X' || $("#tile-" + tile).text() != 'Y')
        return true
      else
        return false
    }  
}

let board = new Board('X','Y');

我想也许在构造函数中附加事件侦听器会起作用？因为至少在调用new时构造函数会被实例化

也许这只是我对事件处理程序是如何处理或“绑定”的误解

编辑：这是我可怜的tic tac toe，供参考：

---

（这就是我在董事会上所说的）

JavaScript事件绑定到文档对象模型（DOM），而不绑定到您可能创建的任何任意对象

事件接口表示DOM中发生的任何事件；一些事件是用户生成的（如鼠标或键盘事件），而其他事件是由API生成的（如指示动画已完成运行、视频已暂停等的事件）

知道了这一点，我们希望在您的类中有某种DOM元素。将表示物理对象的类连接到实际元素是有意义的-该类只是DOM物理状态的另一种表示形式。是的，您是正确的，放置在构造函数中的任何代码都将被执行-包括任何添加事件处理程序的类型

如果要在类上创建侦听器作为方法，可以执行以下操作：

class {
     constructor() {
         this.domElement.addEventListener('click', this.handler.bind(this));
     }

     handler() {
         this.hello();
     }

     hello() {
     }
}

您必须记住，

这个

范围必须通过传入绑定函数调用来修复，因为它作为侦听器传入时会丢失所有上下文。如果在上述代码中您不使用该类的任何方法，那么绑定是不必要的，它只会变成

this.domeElement.addEventListener（'click'，this.handler）；

---

这显然不是添加处理程序的唯一方法，但在我看来，这是处理表示DOM的类时更明智的方法。

JavaScript事件绑定到文档对象模型（DOM），而不绑定到您可能创建的任何任意对象

this.domElement.addEventListener('click', this.handler.bind(this));

事件接口表示DOM中发生的任何事件；一些事件是用户生成的（如鼠标或键盘事件），而其他事件是由API生成的（如指示动画已完成运行、视频已暂停等的事件）

知道了这一点，我们希望在您的类中有某种DOM元素。将表示物理对象的类连接到实际元素是有意义的-该类只是DOM物理状态的另一种表示形式。是的，您是正确的，放置在构造函数中的任何代码都将被执行-包括任何添加事件处理程序的类型

如果要在类上创建侦听器作为方法，可以执行以下操作：

class {
     constructor() {
         this.domElement.addEventListener('click', this.handler.bind(this));
     }

     handler() {
         this.hello();
     }

     hello() {
     }
}

您必须记住，

这个

范围必须通过传入绑定函数调用来修复，因为它作为侦听器传入时会丢失所有上下文。如果在上述代码中您不使用该类的任何方法，那么绑定是不必要的，它只会变成

this.domeElement.addEventListener（'click'，this.handler）；

这显然不是添加处理程序的唯一方法，但在我看来，这是处理表示DOM的类时更明智的方法

this.domElement.addEventListener('click', this.handler.bind(this));

当您这样做时，您无法删除事件处理程序，因此每次使用代码时，都会添加越来越多甚至更多的处理程序，最终会填满内存，降低页面的速度Javascript是一团混乱，急需更换

---

当您这样做时，您无法删除事件处理程序，因此每次使用代码时，都会添加越来越多的处理程序，最终会填充内存，减慢页面速度Javascript是一团乱麻，非常需要替换。

我是否无法使用ES6函数来“不需要”我添加了一个Tic-Tac-Toe的示例代码，我想知道在构造函数中使用事件处理程序是否会使sense@msmith1114是的，这仍然是有意义的-您代表的是一个DOM元素。如果您附加的独立函数不是类或不使用任何其他类方法，则不需要如我在回答中所述绑定。如果您在事件处理程序中提到使用

this

，实际上是指您可能需要绑定的类。我是否不能使用ES6函数来“不需要”我添加了一个Tic-Tac-Toe的示例代码，我想知道在构造函数中使用事件处理程序是否会使sense@msmith1114是的，这仍然是有意义的-您代表的是一个DOM元素。如果您附加的独立函数不是类或不使用任何其他类方法，则不需要如我在回答中所述绑定。如果您在事件处理程序中提到使用

this

，实际上是指您可能需要绑定的类。为什么要多次调用addEventListener？为什么要多次调用addEventListener？