У JavaScript обробка подій є фундаментальним механізмом, що дозволяє веб-сторінкам реагувати на дії користувачів або зміни стану. Події можуть бути спричинені різними діями, такими як натискання кнопки, завантаження сторінки, введення тексту в поле форми або переміщення миші. Обробники подій — це функції, які виконуються у відповідь на певну подію, забезпечуючи інтерактивність та динамічність веб-додатків.

Основні способи підключення обробників подій:

• Використання HTML-атрибутів
• Використання властивості DOM-елемента
• Методи addEventListener та removeEventListener

Використання HTML-атрибутів

Підключення обробників подій безпосередньо через атрибути HTML (так званий inline-стиль). Ім'я атрибута формується як on + ім'я події (наприклад, onclick, oninput).

https://stackblitz.com/edit/web-platform-chnv4hg2?devToolsHeight=33&file=index.html

https://stackblitz.com/edit/stackblitz-starters-f4i6q8ds?file=index.html

або з викликом функції:

https://stackblitz.com/edit/web-platform-zeisbzsf?devToolsHeight=33&file=index.html

https://stackblitz.com/edit/stackblitz-starters-upa1hnms?file=index.html

Переваги:

• Простота для початківців.
• Зручно для швидкого прототипування.

Недоліки:

• Змішування HTML і JavaScript (порушує принцип розділення логіки та представлення).
• Не можна призначити декілька обробників на одну подію.

Контекст (this) у обробниках подій