Модуль 10

Події та обробники подій

Ось урок, написаний у стилі David Malan: енергійно, з аналогіями та акцентом на розуміння "чому".

🎓 CS50: Події та обробники подій (Events & Event Handlers)

Привіт, світе! 👋 Радий бачити вас.

Сьогодні ми переходимо рубікон. До цього моменту наші програми були схожі на книги: ви відкривали їх, код виконувався рядок за рядком зверху вниз, видавав результат і... все. Кінець історії.

Але сучасний веб — це не книги. Це діалог.

1. 🔥 Вступ: Чому без цього веб мертвий?

Уявіть, що ви прийшли до ресторану. Ви сідаєте за столик і кажете: "Я хочу піцу". Але офіціант стоїть нерухомо. Ви махаєте рукою — нуль реакції. Ви кричите — тиша.

Чому? Тому що офіціанта не навчили реагувати на ваші дії.

У програмуванні досі ми писали скрипти, які просто "робили свою справу". Але як змусити кнопку відчути, що на неї натиснули? Як змусити поле вводу розуміти, що ви друкуєте текст?

Ось тут на сцену виходять Події (Events).

Питання до вас: Якби ваш телефон не мав системи подій, що сталося б, якби вам подзвонили, поки ви граєте в гру? (Спойлер: він би просто проігнорував дзвінок, бо був би зайнятий грою. Події дозволяють системі сказати: "Гей, перервись на секунду, тут дещо сталося!")

Без подій інтернет був би просто набором статичних картинок. Події — це нервова система вашого додатку.

2. 🧠 Теоретична база: Як це працює "під капотом"

Давайте розберемо це без складних термінів. Уявіть, що ви чекаєте на важливий лист.

Є два способи це зробити: 1. Постійне опитування (Polling): Ви підходите до поштової скриньки кожні 5 секунд, відкриваєте її і дивитесь. Порожньо. Знову. Порожньо. Ви втомлюєтесь, ви не можете робити нічого іншого. Це поганий спосіб. 2. Подія (Event Handling): Ви встановлюєте на скриньку дзвіночок. Ви йдете займатися своїми справами (пити каву, писати код). Тільки коли листоноша кине листа — дзень! — ви йдете і забираєте його.

У JavaScript це працює саме за другим сценарієм.

Три кити інтерактивності:

  1. Джерело події (Event Source): Хто кричить? (Кнопка, вікно браузера, поле вводу).
  2. Тип події (Event Type): Що саме сталося? (Клік, натискання клавіші, прокрутка, наведення миші).
  3. Обробник (Handler / Listener): Функція, яка запускається у відповідь. Це ваш код, який каже: "Окей, клік відбувся, тепер я маю запустити феєрверк".

⚙️ Синтаксис (логіка)

Ми використовуємо метод з магічною назвою addEventListener (додати слухача подій).

елемент.addEventListener('що_сталося', функція_яку_треба_запустити);

⚠️ Що треба запам’ятати залізно: Ми передаємо функцію як інструкцію, а не запускаємо її одразу. * ✅ Правильно: button.addEventListener('click', sayHello); (Ось тобі функція, запусти, коли прийде час). * ❌ Неправильно: button.addEventListener('click', sayHello()); (Запусти функцію ПРЯМО ЗАРАЗ, ще до кліку, і віддай кнопці результат).

3. 🧪 Приклади: Від "Hello World" до реальності

Рівень 1: Кнопка-панікер 😱

Створимо кнопку, яка кричить у консоль, коли її чіпають.

HTML:

<button id="panicBtn">Не натискай мене!</button>

JavaScript:

// 1. Знаходимо елемент
const btn = document.querySelector("#panicBtn");

// 2. Пишемо функцію-обробник
function scream() {
    console.log("ААА! Мене натиснули!");
    alert("Тривога!");
}

// 3. Зв'язуємо їх (вішаємо "дзвіночок")
btn.addEventListener("click", scream);

Що ми очікуємо? Сторінка завантажиться, але нічого не відбудеться. Тиша. Але варто вам клікнути... Браузер "почує" клік, знайде нашу функцію scream і виконає її.

Рівень 2: Лампа (Перемикач станів) 💡

У реальних проєктах ми часто змінюємо вигляд елементів. Давайте зробимо "Темну тему" своїми руками.

JavaScript:

const toggleBtn = document.querySelector("#themeBtn");
const body = document.querySelector("body");

toggleBtn.addEventListener("click", function() {
    // Ми можемо писати функцію прямо тут (анонімна функція)
    body.classList.toggle("dark-mode");
    console.log("Світло вимкнено/увімкнено!");
});

Тут ми використали анонімну функцію. Це як одноразовий рецепт, який ми приклеїли прямо до кнопки.

Рівень 3: Шпигун (Об'єкт Event) 🕵️‍♂️

Коли відбувається подія, браузер створює спеціальний звіт — об'єкт події (зазвичай називають event або e). Там записані всі деталі: координати миші, яка клавіша натиснута тощо.

Давайте слідкувати за мишкою!

document.addEventListener("mousemove", function(event) {
    // event.clientX та event.clientY - це координати курсора
    console.log(`Миша тут: X=${event.clientX}, Y=${event.clientY}`);

    // Змінюємо колір фону залежно від позиції миші!
    document.body.style.backgroundColor = `rgb(${event.clientX % 255}, 100, 100)`;
});

Питання: Що буде, якщо я просто рухатиму мишкою по екрану? Відповідь: Колір фону почне "психоделічно" змінюватися в реальному часі. Ви щойно створили інтерактивну графіку!

4. 🛠 Практична частина

Прийшов час забруднити руки кодом. Відкрийте редактор (VS Code або CodePen) і виконайте:

  1. 🔹 Розігрів: Скопіюйте приклад "Кнопка-панікер", але змініть текст alert на "Вітаю, ви хакер!".
  2. 🔹 Експеримент: Змініть подію 'click' на 'mouseenter' (наведення миші). Що змінилося? Чи зручно це для користувача?
  3. 🔹 Виправ помилку: javascript // Чому це спрацьовує одразу при завантаженні, а не при кліку? button.addEventListener('click', showMessage()); Виправте код так, щоб він працював коректно.
  4. 🔹 Реальна задача (Лічильник лайків):
    • Створіть кнопку з текстом "Like: 0".
    • При кожному кліку число має зростати на 1.
    • Підказка: Вам знадобиться змінна let count = 0; зовні функції.
  5. 🔹 Міні-кейс ("Неслухняна кнопка"):
    • Створіть кнопку. Додайте обробник 'mouseover', який змінює її style.position на absolute і ставить випадкові top та left.
    • Спробуйте на неї клікнути. (Це класичний жартівливий скрипт).

5. 💡 Мислення як у розробника

Ось що відрізняє новачка від профі в темі подій:

1. Не забруднюйте HTML. Ви побачите в інтернеті старі приклади: <button onclick="doSomething()">. Забудьте про це. Це як змішувати картоплю і десерт в одній тарілці. * HTML — це структура (скелет). * JS — це поведінка (м'язи). Тримайте їх окремо через addEventListener.

2. Пам'ятайте про чергу. JavaScript — однопотоковий (у нього тільки одні "руки"). Якщо ваша функція-обробник робить дуже складні обчислення (наприклад, рахує число Пі до мільярдного знаку), весь інтерфейс зависне. Кнопки не натискатимуться, анімація зупиниться. Порада: Обробники мають бути швидкими!

3. Дужки () вирішують долю. Я повторюю це, бо це помилка №1. * func — це сама функція (як рецепт на папері). * func() — це результат її виконання (вже готова страва). В addEventListener ми даємо рецепт, а не страву!

6. 🧩 Підсумок

Сьогодні ми оживили Франкенштейна. Ваші веб-сторінки навчилися: 1. Слухати (через addEventListener). 2. Реагувати (викликати функції). 3. Передавати дані (через об'єкт event).

Тепер ви не просто верстальник, ви — сценарист інтерактивного досвіду.

🕵️ Тизер наступного уроку: Зараз ми вішали обробник на одну кнопку. А що, якщо у нас список із 1000 товарів? Вішати 1000 слухачів — це вбити пам'ять браузера. Як повісити один слухач, який керуватиме всіма? Дізнаємось на темі: "Спливання подій (Event Bubbling) та Делегування".

А поки що — це був CS50. Щасти вам з кодом! 💻

← До списку уроків Наступний урок →