Как вы вызываете метод объекта из вызова addEventListener ()? - PullRequest
Новая
       34

Как вы вызываете метод объекта из вызова addEventListener ()?

1 голос
/ 06 мая 2019

Я добавляю прослушиватель событий к кнопке внутри метода объекта. Я пытаюсь добавить вызов к другой функции метода, но когда я использую this.reset(), 'this' указывает на кнопку слушателя //, а не на сам объект.

Этот код был преобразован в объект и раньше работал нормально. В этом случае мне не нужно было использовать «это». 

const colorGame = {
    reset: function() {...},

    init: function() {
        for (let i = 0; i < modeSwitches.length; i++) {
            modeSwitches[i].addEventListener("click", function() {
                modeSwitches[0].classList.remove('selected');
                modeSwitches[1].classList.remove('selected');

                // These two lines are why I can't use anonymous functions
                this.classList.add('selected'); 
                this.textContent === 'Easy' ? numSquares = 3 : numSquares = 6;
                this.reset();
            });
        }

        ...
    resetButton.addEventListener('click', function() {
            this.reset(); // This call also fails with the same error
});

Ошибка в консоли браузера Chrome: colorGame.js:78 Uncaught TypeError: this.reset is not a function

Мое намерение - использовать colorGame.reset() и вызывать его при нажатии кнопок.

Ответы [ 3 ]

2 голосов
/ 06 мая 2019

Измените ваши слушатели событий, чтобы использовать анонимные функции, такие как: modeSwitches[i].addEventListener("click", () => this.reset()); resetButton.addEventListener('click', () => this.reset());

1 голос
/ 06 мая 2019

Пусть ваш объект colorGame реализует интерфейс EventListener , предоставив ему метод handleEvent.Затем вы можете привязать сам объект как обработчик события, и его метод handleEvent будет вызываться при возникновении события.

Значением this в handleEvent будет объект colorGame. 

const colorGame = {
  handleEvent: function(event) {
    // handle events here
    switch (event.type) {
      case "click":
        this.reset();
        break;
        
      default:
        console.log("unhandled event type");
    }
  },

  reset: function() {
    console.log("reset was called");
  },

  // Bind the colorGame object instead of binding functions
  init: function() {
    for (let i = 0; i < modeSwitches.length; i++) {
      modeSwitches[i].addEventListener("click", colorGame);
    }

    resetButton.addEventListener('click', colorGame);
  }
}
1 голос
/ 06 мая 2019

Просто сохраните this в другой переменной.Я обычно называю это that. 

const colorGame = {
reset: function() {...},

init: function() {

    let that = this;
    for (let i = 0; i < modeSwitches.length; i++) {
        modeSwitches[i].addEventListener("click", function() {
            ...
            that.reset();
        });
    }
    ...
    resetButton.addEventListener('click', function() {
        that.reset(); 
    });
...