1

Допустим хотим поставить обработчик события, и снять его тут же:

let button = document.getElementById('button');

function func() {
  console.log('Сработало');
}

button.addEventListener('click', func);
button.removeEventListener('click', func);
<button id="button">Кликни</button>

Прекрасно, func не сработал.

Но что будет, если в обработчике есть функции с this?

let button = document.getElementById('button');

let objWithFunc = {
  func() {
    console.log('Сработало');
  },
  start() {
    function auxiliaryFunc() {
      this.func();
    }
    // Воспользуемся .bind(this) иначе будет ошибка
    button.addEventListener('click', auxiliaryFunc.bind(this));

    // Ни один из следующих методов не снимет обработчик
    button.removeEventListener('click', auxiliaryFunc);
    button.removeEventListener('click', auxiliaryFunc.bind(this));
  }
}

objWithFunc.start();
<button id="button">Кликни</button>

Как снять обработчик в этом случае?

2 ответа 2

5

.bind() создаёт новую функцию. Именно её, а не созданную новую, нужно передавать в removeEventListener

    const listener = auxiliaryFunc.bind(this)
    button.addEventListener('click', listener);
    button.removeEventListener('click', listener);
1
  • 1
    "Именно её, а не созданную новую" - немного сложно сформулировано, скорее - в addEventListener и removeEventListener нужно передавать ссылку на одну и ту же функцию. 11 апр 2018 в 4:44
1

Немного не по теме, но можно обойтись и без .bind(this) в реалиях es6.

const button = document.getElementById('button');

const objWithFunc = {
  func() {
    console.log('Сработало');
  },
  start() {
    const auxiliaryFunc = () => {
      this.func();
    }
    
    button.addEventListener('click', auxiliaryFunc);
    button.removeEventListener('click', auxiliaryFunc);
  }
}

objWithFunc.start();
<button id="button">Кликни</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.