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

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

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

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

Контент

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

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

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

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

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

## 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.

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

Для рев’юера

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

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