Чим onclick відрізняється від addEventListener()?
1. Основна відмінність
| Характеристика | onclick | addEventListener() |
|---|---|---|
| Кількість обробників | Тільки один - новий перезапише старий | Можна додати кілька |
| Видалення | Просто присвоїти null | Через removeEventListener() |
| Гнучкість | Тільки одна подія (наприклад, onclick) | Будь-яка подія: click, keydown, scroll, input, customEvent |
| Дод. налаштування | Немає | Є (once, capture, passive) |
| Сумісність | Старий, підтримується всюди | Сучасний, підтримується в усіх сучасних браузерах |
2. Приклад: перезапис обробника
javascript
const btn = document.querySelector('#btn');
// перший обробник
btn.onclick = () => console.log('Перший');
// другий обробник
btn.onclick = () => console.log('Другий');У підсумку при кліку виведеться лише
javascript
Другийтому що другий перезаписав перший.
А ось з addEventListener() спрацюють обидва:
javascript
btn.addEventListener('click', () => console.log('Перший'));
btn.addEventListener('click', () => console.log('Другий'));При кліку:
javascript
Перший
Другий3. Приклад видалення обробника
З onclick:
javascript
btn.onclick = null; // видаляє обробникЗ addEventListener:
javascript
function handler() {
console.log('click');
}
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);4. Приклад з опціями (можливості лише у addEventListener)
javascript
btn.addEventListener('click', handler, { once: true });Обробник спрацює лише один раз і автоматично видалиться.
З onclick так не можна.
5. Можна призначати будь-які події
З onclick можна тільки "click", а от з addEventListener - будь-який тип, навіть користувацький:
javascript
element.addEventListener('myCustomEvent', () => console.log('custom event!'));6. Приклад різниці в HTML
Можна додати обробник прямо в HTML:
javascript
<button onclick="alert('Привіт')">Натисни</button>Але це не рекомендується - псує структуру (JS у HTML) і важко підтримувати.
Сучасна практика - завжди через addEventListener() у JS.
Підсумок
onclick | addEventListener() | |
|---|---|---|
| Можна призначити кілька обробників | Ні | Так |
| Можна керувати поведінкою (once, capture) | Ні | Так |
| Можна слухати будь-які події | Тільки click | Будь-які |
| Можна використовувати в HTML напряму | Так | Ні |
| Сучасний стандарт | Застарілий | Рекомендований |
Висновок:
onclick- простий, але застарілий спосіб, годиться для дрібних задач.addEventListener()- сучасний, гнучкий і правильний спосіб призначати події у JavaScript.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.