onclick проти addEventListener

JavaScriptJunior~2 хв читання

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 їй присвоюють функцію, а не рядок коду.

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

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

Premium

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