Присоединить прослушиватель событий к методу класса

Question

Я пытаюсь добавить слушателя событий к элементу с помощью метода класса. Можете ли вы сказать мне, что мне не хватает и что не работает?

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">

Answer 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()