Що роблять addEventListener() і removeEventListener()?

JavaScriptMiddle~1 хв читання

`addEventListener()`

Призначення

Додає обробник (функцію), яка буде викликатись при настанні певної події.

Синтаксис:

javascript

element.addEventListener(type, listener, options);

Аргумент	Що означає
`type`	рядок - назва події (`'click'`, `'input'`, `'keydown'` тощо)
`listener`	функція, яка виконається при події
`options` (необов'язково)	об'єкт з додатковими налаштуваннями (наприклад `{ once: true }`)

Приклад:

javascript

<button id="btn">Натисни</button>

javascript

const btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  alert('Кнопку натиснуто!');
});

Тепер при кожному кліку на кнопку буде викликатись цей обробник.

Приклад з об'єктом `event`:

javascript

btn.addEventListener('click', (event) => {
  console.log(event.type);   // "click"
  console.log(event.target); // елемент, на який клікнули
});

Корисні опції:

javascript

btn.addEventListener('click', handler, {
  once: true,      // обробник спрацює лише 1 раз
  capture: false,  // слухати на етапі спливання (типово)
  passive: true,   // повідомляє браузеру, що preventDefault не буде викликано
});

`removeEventListener()`

Призначення

Видаляє раніше доданий обробник події. Використовується, якщо тобі потрібно відключити реакцію на подію.

Синтаксис:

javascript

element.removeEventListener(type, listener, options);

Важливо: Щоб видалити обробник, потрібно передати ту саму функцію, яку ти передавав в addEventListener.

Неправильно:

javascript

btn.addEventListener('click', () => console.log('hi'));
btn.removeEventListener('click', () => console.log('hi')); // не спрацює!

Тут створюються дві різні анонімні функції, і браузер не розуміє, яку видаляти.

Правильно:

javascript

function handleClick() {
  console.log('hi');
}

btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);

Тепер видалення спрацює.

Приклад з реальної практики

javascript

function handleScroll() {
  console.log('Прокрутка!');
}

// Починаємо слухати
window.addEventListener('scroll', handleScroll);

// Через 3 секунди перестаємо слухати
setTimeout(() => {
  window.removeEventListener('scroll', handleScroll);
  console.log('Слухач знято!');
}, 3000);

Підсумок

Метод	Що робить	Особливості
`addEventListener()`	Додає обробник події	Можна навісити кілька слухачів на одну подію
`removeEventListener()`	Видаляє обробник	Працює лише з тим самим об'єктом функції
`options`	Налаштування	`{ once, capture, passive }` - керують поведінкою слухача

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.