Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «addEventListener і removeEventListener». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`addEventListener(type, listener, options)` підписує функцію на подію елемента, а `removeEventListener(type, listener, options)` знімає цю підписку.** На одну подію можна навісити кілька слухачів, кожен з них отримує об'єкт `event` з даними про те, що сталося. Опції `{ once, capture, passive }` керують тим, скільки разів і на якій фазі спрацює обробник. Зняти слухача можна лише посиланням на ту саму функцію, тому дві однакові на вигляд анонімні стрілки не працюють. ```javascript function onClick() { console.log('hi'); } btn.addEventListener('click', onClick); btn.removeEventListener('click', onClick); // працює: та сама функція ``` **Ключове:** `removeEventListener` спрацьовує тільки з тим самим об'єктом функції і тим самим значенням `capture`, що й `addEventListener`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**`addEventListener()` реєструє функцію-обробник, яку браузер викличе, коли на елементі станеться певна подія, а `removeEventListener()` знімає раніше зареєстрований обробник.** Обидва методи доступні на будь-якому вузлі DOM, а також на `window` і `document`. ## Теорія ### TL;DR - `addEventListener(type, listener, options)` підписує функцію на подію. - На одну й ту саму подію можна навісити скільки завгодно слухачів. - Обробник отримує об'єкт `event` з даними про подію: `type`, `target` та інші. - `removeEventListener(type, listener, options)` знімає підписку. - Зняти можна лише ту саму функцію, яку додавали: нова анонімна стрілка не підійде. - Опції `{ once, capture, passive }` керують поведінкою слухача. ### Швидкий приклад ```html <button id="btn">Натисни</button> ``` ```javascript const btn = document.querySelector('#btn'); function handleClick() { alert('Кнопку натиснуто!'); } btn.addEventListener('click', handleClick); // пізніше, коли реакція вже не потрібна btn.removeEventListener('click', handleClick); ``` ### Сигнатура addEventListener ```javascript element.addEventListener(type, listener, options); ``` | Аргумент | Що означає | | --- | --- | | `type` | рядок, назва події (`'click'`, `'input'`, `'keydown'` тощо) | | `listener` | функція, яка виконається під час події | | `options` *(необов'язково)* | об'єкт з додатковими налаштуваннями, наприклад `{ once: true }` | Після підписки обробник викликається щоразу, коли подія доходить до цього елемента. Головна перевага над старим `onclick` у тому, що слухачів може бути багато і вони не перетирають один одного. ### Об'єкт event Браузер передає обробнику об'єкт події з усією інформацією про те, що сталося: ```javascript btn.addEventListener('click', (event) => { console.log(event.type); // "click" console.log(event.target); // елемент, на який клікнули }); ``` ### Опції слухача ```javascript btn.addEventListener('click', handler, { once: true, // обробник спрацює лише один раз capture: false, // слухати на фазі спливання, це значення за замовчуванням passive: true, // повідомляє браузеру, що preventDefault не буде викликано }); ``` `once: true` знімає слухача автоматично після першого спрацювання, тому окремий виклик `removeEventListener` уже не потрібен. `passive: true` дозволяє браузеру не чекати на обробник перед прокручуванням, що помітно покращує плавність на дотикових екранах. ### Зняття обробника: та сама функція ```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 }` керують поведінкою слухача | ### Типові помилки - Передавати в `removeEventListener` нову анонімну функцію або новий результат `.bind(this)`: посилання відрізняється, і слухач залишається висіти. - Забувати, що `capture` має збігатися: слухач, доданий з `{ capture: true }`, знімається лише з таким самим `capture`. - Не знімати слухачі з `window` чи `document` під час знищення компонента, через що виникають витоки пам'яті. - Викликати `preventDefault()` усередині слухача з `passive: true`: браузер його проігнорує і виведе попередження в консоль. - Навішувати `addEventListener` у кожному перемальовуванні і накопичувати дублікати обробників.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.