Как снять обработчик события, если он был добавлен с применением .bind(this)?

172

12 апреля 2018, 13:07

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

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>

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

Answer 1

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

    const listener = auxiliaryFunc.bind(this)
    button.addEventListener('click', listener);
    button.removeEventListener('click', listener);

Answer 2

Немного не по теме, но можно обойтись и без .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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Настроить пагинацию на Angular2 и Bootstrap

Добрый день! Нужна помощь знающих, который день мучаю пагинацию на Bootstrap в Angular-приложении, но не могу понять как заставить правильно работать...

159

javascript