Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «onclick проти addEventListener». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`onclick` це властивість елемента, тому обробник може бути лише один: нове присвоєння перезаписує старе. `addEventListener()` це метод, який додає обробник до внутрішнього списку слухачів, тож їх може бути скільки завгодно.** Крім того, `addEventListener` працює з будь-яким типом події, включно з користувацькими, і приймає опції `{ once, capture, passive }`, чого `onclick` не вміє. Знімають їх теж по-різному: `onclick = null` проти `removeEventListener(type, handler)`. ```javascript btn.onclick = () => console.log('Перший'); btn.onclick = () => console.log('Другий'); // перезаписав перший btn.addEventListener('click', () => console.log('A')); btn.addEventListener('click', () => console.log('B')); // виконаються обидва ``` **Ключове:** `onclick` це одна властивість (один обробник), `addEventListener` це список слухачів з опціями, і саме він є сучасним стандартом.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**`onclick` це властивість DOM-елемента, у якій вміщується рівно один обробник, а `addEventListener()` це метод, що додає обробник до списку слухачів події.** Звідси випливає вся решта відмінностей: кількість обробників, спосіб їх зняття, доступні опції та типи подій. ## Теорія ### TL;DR - `onclick` зберігає один обробник, повторне присвоєння перезаписує попередній. - `addEventListener()` додає обробники до списку, вони виконуються в порядку додавання. - Зняття: `onclick = null` проти `removeEventListener('click', handler)`. - Лише `addEventListener` має опції `once`, `capture`, `passive`. - Лише `addEventListener` слухає будь-який тип події, зокрема користувацькі. - Інлайн-атрибут `onclick` у HTML працює, але змішує розмітку з логікою; сучасна практика це `addEventListener` у JavaScript. ### Швидкий приклад ```javascript const btn = document.querySelector('#btn'); // один обробник: другий рядок перезапише перший btn.onclick = () => console.log('Перший'); btn.onclick = () => console.log('Другий'); // список слухачів: виконаються обидва btn.addEventListener('click', () => console.log('A')); btn.addEventListener('click', () => console.log('B')); ``` ### Головна відмінність | Характеристика | `onclick` | `addEventListener()` | | --- | --- | --- | | Кількість обробників | лише один, новий перезапише старий | можна додати кілька | | Зняття | достатньо присвоїти `null` | через `removeEventListener()` | | Гнучкість | тільки одна подія, наприклад `onclick` | будь-яка подія: `click`, `keydown`, `scroll`, `input`, користувацька | | Додаткові налаштування | немає | є: `once`, `capture`, `passive` | | Сумісність | старий спосіб, підтримується скрізь | сучасний, підтримується в усіх актуальних браузерах | ### Перезапис обробника проти списку слухачів ```javascript const btn = document.querySelector('#btn'); // перший обробник btn.onclick = () => console.log('Перший'); // другий обробник btn.onclick = () => console.log('Другий'); ``` Під час кліку в консолі з'явиться тільки: ```text Другий ``` тому що другий **перезаписав** перший. А з `addEventListener()` спрацюють обидва: ```javascript btn.addEventListener('click', () => console.log('Перший')); btn.addEventListener('click', () => console.log('Другий')); ``` Під час кліку: ```text Перший Другий ``` ### Як знімати обробник З `onclick` достатньо занулити властивість: ```javascript btn.onclick = null; // знімає обробник ``` З `addEventListener` потрібне посилання на ту саму функцію: ```javascript function handler() { console.log('click'); } btn.addEventListener('click', handler); btn.removeEventListener('click', handler); ``` Саме тому анонімну стрілку, передану в `addEventListener`, зняти вже не вийде: посилання на неї ніде не збережено. ### Опції та довільні типи подій Опції доступні тільки в `addEventListener`: ```javascript btn.addEventListener('click', handler, { once: true }); ``` Обробник спрацює **лише один раз** і автоматично зніметься. З `onclick` так не можна. Так само тільки `addEventListener` слухає будь-який тип події, включно з користувацьким: ```javascript element.addEventListener('myCustomEvent', () => console.log('custom event!')); ``` Через `onclick` можна підписатися лише на клік, а для решти подій довелося б використовувати окремі властивості на кшталт `onkeydown` чи `onscroll`, і кожна з них так само вміщує лише один обробник. ### Інлайн onclick у HTML і підсумок Обробник можна написати прямо в розмітці: ```html <button onclick="alert('Привіт')">Натисни</button> ``` Але так робити **не рекомендують**: це змішує структуру з логікою (JavaScript усередині HTML) і ускладнює підтримку. Сучасна практика це завжди `addEventListener()` у JavaScript. | | `onclick` | `addEventListener()` | | --- | --- | --- | | Можна призначити кілька обробників | ні | так | | Можна керувати поведінкою (`once`, `capture`) | ні | так | | Можна слухати будь-які події | ні, тільки click | так, будь-які | | Можна використати прямо в HTML | так | ні | | Сучасний стандарт | застарілий спосіб | рекомендований спосіб | > **Висновок:** `onclick` простий, але застарілий спосіб, придатний хіба що для дрібних задач. `addEventListener()` це сучасний, гнучкий і правильний спосіб призначати події в JavaScript. ### Типові помилки - Вважати, що `btn.onclick = fn` додає ще один обробник: він мовчки затирає попередній, і чужий код перестає працювати. - Змішувати обидва підходи на одному елементі, а потім не розуміти, чому спрацьовує тільки частина логіки. - Передавати в `addEventListener` анонімну функцію там, де її потім треба буде зняти. - Писати `onclick="..."` у HTML заради швидкості: такий код неможливо покрити тестами і він конфліктує з політиками безпеки (CSP). - Плутати властивість `onclick` з рядковим атрибутом: у JavaScript їй присвоюють функцію, а не рядок коду.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.