Question

我一直在学习JavaScript和面向对象/功能编程的细节，而不是编写那些有效的hacky命令式代码....只是丑陋而且老实说效率不高。

我正在重写一个井字游戏，我正在使用Classes来实现“Board”功能（更新电路板/检查瓷砖等等）。

我意识到.....我应该在页面中放置事件监听器（用于按钮/磁贴/等等）。我通常只将jquery .click函数放在document.ready范围内，但这似乎不对。

当我用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被调用时被实例化至少是正确的吗？

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

编辑：到目前为止，这是我可怜的井字游戏：http://codepen.io/msmith1114/pen/qmNevg

（这就是我对董事会的讨论）

Answer 1

JavaScript事件绑定到文档对象模型（DOM），并且不绑定到您可能做的任何任意对象。

https://developer.mozilla.org/en-US/docs/Web/API/Event

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

所以我们知道，我们想在你的班级中拥有某种DOM元素。将表示物理对象的类连接到实际元素是有意义的 - 该类只是DOM的物理状态的另一种表示。是的，你是正确的，任何放置在构造函数中的代码都将被执行 - 包括任何事件处理程序的添加。

如果您想在类上创建侦听器，您可以执行以下操作：

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

     handler() {
         this.hello();
     }

     hello() {
     }
}

至关重要的是要记住this范围必须通过传入绑定函数调用来修复，因为它在作为侦听器传入时会丢失所有上下文。如果在上面的代码中你没有使用该类的任何方法，那么绑定就不是必需的，它只是this.domElement.addEventListener('click', this.handler);。

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

Answer 2

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

执行此操作时，无法删除事件处理程序，因此每次使用代码时都会添加更多处理程序，最终填充内存，减慢页面速度Javascript非常混乱，需要更换错误。

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

2 个答案: