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

Question

我一直在学习javaScript和面向对象/功能编程的来源和出现，而不是编写工作时的hacky命令式代码。。。。。。。。。/p>

我正在重写一款TIC-TAC-TOE游戏，并且正在使用类实现"板"功能(更新板/检查图块/等等(

(

我意识到.....在地球上，我应该将活动听众(对于按钮/瓷砖/等(放在页面中。我通常只是将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');

我以为可能会将活动的听众附加在构造函数中会起作用吗？由于当新的称为正确时，将实例化构造函数？

也许这只是我对活动处理程序如何处理或完全"绑定"的误解？

编辑：到目前为止，这是我可怜的TIC-TAC-TOE参考：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是一团糟，需要替换很难替换。