Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що роблять addEventListener() і removeEventListener()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## `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 }` - керують поведінкою слухача |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати329 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.