🎪 Програмування, кероване подіями 🎪

Або "Як зробити так, щоб код реагував на твої дії, наче він телепат!"

👇 Спробуй клікнути будь-де на сторінці! 👇

Твій мозок Що? Код може реагувати на мої дії? Це магія?

JavaScript Не магія, а програмування, кероване подіями! Готуйся до веселощів! 🎉

Що таке програмування, кероване подіями?

Уяви: ти заходиш у кімнату (подія), і світло автоматично вмикається (обробка події). Ось так працює JavaScript!

Це парадигма, де виконання коду залежить від подій - кліків, натискань клавіш, наведень миші тощо.

Ти щойно викликав подію DOMContentLoaded - сторінка завантажилась!

HTML-атрибути (onclick)

<button onclick="alert('Ой!')">Клікни</button>

Як дідусь, який все ще пише SMS замість месенджера

Властивість onevent

button.onclick = function() {
  // Код тут
};

Вже краще, але ще не ідеально

addEventListener

button.addEventListener('click', function() {
  // Код тут
});

Як супергерой з суперсилами!

click dblclick mouseover mouseout keydown keyup load submit change scroll focus blur

Наведи на мене мишку: Мишка не наведена

Натисни будь-яку клавішу: Клавіша не натиснута

Клікни на квадрат, щоб змінити колір!

Наведи мишку на кнопку і подивись, що станеться!

Натисни поспіль: К О Д

Ще нічого не сталося...

Створіть зображення, яке:

Запам'ятай: addEventListener - твій найкращий друг у світі подій!

JavaScript Тепер ти знаєш, як зробити сторінку живою! Пам'ятай: кожна твоя дія - це подія, яку можна обробити!

Події Ми завжди тут! Клікай, наводи, скроль - ми любимо бути корисними! 🎪