将事件侦听器附加到类方法

【问题标题】：Attach event listener to a class method将事件侦听器附加到类方法
【发布时间】：2020-05-25 20:30:24
【问题描述】：

我正在尝试通过类方法将事件侦听器添加到元素。你能告诉我我缺少什么并且它不起作用吗？

class PumpBasic
{
    constructor(_name)
    {
        this.name = _name;
    }

    Foo() 
    {
        this.element = document.getElementById(this.name + "AutoManualSwitch");
        this.element.addEventListener('click', myFunction, false);
    }

    myFunction()
    {
        console.log("clicked");
    }

}

pump1 =new PumpBasic("pump1");

<input  id="pump1AutoManualSwitch" data-on="Manual" data-off="Auto" data-onstyle="primary"  type="checkbox" data-toggle="toggle" data-width="75" data-height="30">

【问题讨论】：

对不起，这是一个错字。我编辑了它。代码还是不行

标签： javascript class methods mouseevent

【解决方案1】：

如果您要将myFunction 方法作为回调函数传递给addEventListener，则需要使用this 来引用它。

您还需要绑定它才能正常工作。如果你不绑定它，全局 Event 对象会在调用时重新定义它。

这应该可行：

class PumpBasic
{
    constructor(_name)
    {
        this.name = _name;
        this.myFunction = this.myFunction.bind(this)
    }

    Foo() 
    {
        this.element = document.getElementById(this.name + "AutoManualSwitch");
        this.element.addEventListener('click', this.myFunction, false);
    }

    myFunction()
    {
        console.log("clicked");
    }

}

const pump1 = new PumpBasic("pump1");
pump1.Foo()

【讨论】：

也想给你提个醒。你不应该以大写字母开始你的方法。将Foo 更改为foo 将有助于提高可读性。