🆓 FREE PROJECT
🚖 Урок 3: Events Pro — кнопки в дії!
⚡ Кнопки таксі оживають!
В додатку таксі багато кнопок: "Викликати", "Скасувати", "Оцінити".
Кожна кнопка — це Event. Вчимося слухати користувача!
💡
FUN FACT!
🎮 Один скрол сторінки генерує 100+ подій scroll за секунду!
⌨️ Швидкий друк — це 10-15 подій input щосекунди!
🧠
НОВЕ В ЦЬОМУ УРОЦІ!
⚡ input — реагуємо на кожен символ в реальному часі!
🗑️ removeEventListener — видаляємо слухач коли він більше не потрібен!
Events — це як радіохвилі!
Уяви, що кожна дія користувача — це радіосигнал.
addEventListener — це радіоприймач, що ловить певну частоту.
removeEventListener — вимикаємо приймач, коли музика набридла! 📴
addEventListener — це радіоприймач, що ловить певну частоту.
removeEventListener — вимикаємо приймач, коли музика набридла! 📴
📱 ЖИВИЙ ДОДАТОК
Виклик та скасування таксі
🚖 KOODI TAXI
0/30
💰 Очікуємо адресу...
👆 Введи адресу — бачиш лічильник символів? Це подія input!
input vs change
Коли що спрацьовує?
⚡ input — кожен символ
Подій: 0
🔄 change — після виходу
Подій: 0
💡 Різниця:
input = реальний час, change = коли закінчив
removeEventListener
Вимикаємо слухач!
Кліків: 0
🟢 Слухач АКТИВНИЙ
1
⌨️ Подія input — реальний час
input — це як LIVE трансляція!
Кожен символ миттєво з'являється на екрані глядачів.
Кожен символ миттєво з'являється на екрані глядачів.
Перейди в app.js та створи лічильник символів:
// Знаходимо поле вводу
const pickup = document.getElementById('pickup');
const charCounter = document.getElementById('charCounter');
// Слухаємо КОЖЕН введений символ
pickup.addEventListener('input', function(e) {
// e.target.value — поточний текст в полі
const length = e.target.value.length;
charCounter.textContent = length + '/30 символів';
});
🧪 Подія input спрацьовує...
💡 input — спрацьовує при КОЖНІЙ зміні тексту
💡 e.target.value — поточний текст в полі
💡 .length — кількість символів в рядку
💡 Ідеально для: пошуку, валідації, лічильників
💡 e.target.value — поточний текст в полі
💡 .length — кількість символів в рядку
💡 Ідеально для: пошуку, валідації, лічильників
2
🗑️ removeEventListener — прибираємо слухач
Уяви, що ти підписався на розсилку.
addEventListener — підписка. removeEventListener — відписка!
addEventListener — підписка. removeEventListener — відписка!
Створюємо функцію яку можна видалити:
// ⚠️ ВАЖЛИВО: функція має бути ІМЕНОВАНА!
function handleClick() {
alert('Кнопка натиснута!');
}
const btn = document.getElementById('myBtn');
// Додаємо слухач
btn.addEventListener('click', handleClick);
// Видаляємо слухач (кнопка більше не реагує!)
btn.removeEventListener('click', handleClick);
🧪 Щоб removeEventListener працював, функція має бути...
💡 removeEventListener — видаляє раніше доданий слухач
💡 Іменована функція —
💡 Навіщо? Економія пам'яті, контроль поведінки
💡 Приклад: Кнопка "Скасувати" — після скасування більше не клікається
💡 Іменована функція —
function назва() {}, а не function() {}💡 Навіщо? Економія пам'яті, контроль поведінки
💡 Приклад: Кнопка "Скасувати" — після скасування більше не клікається
3
🚖 Практика: Виклик і скасування
Об'єднуємо все разом!
Кнопка "Викликати" → показуємо "Скасувати" → видаляємо слухач!
Кнопка "Викликати" → показуємо "Скасувати" → видаляємо слухач!
Повна логіка в app.js:
const callBtn = document.getElementById('callBtn');
const cancelBtn = document.getElementById('cancelBtn');
const status = document.getElementById('status');
// Функція виклику таксі
function callTaxi() {
status.textContent = '🔍 Шукаємо водія...';
callBtn.style.display = 'none';
cancelBtn.style.display = 'block';
}
// Функція скасування
function cancelTaxi() {
status.textContent = '❌ Замовлення скасовано';
cancelBtn.style.display = 'none';
callBtn.style.display = 'block';
// Видаляємо слухач щоб не клікнути двічі
cancelBtn.removeEventListener('click', cancelTaxi);
}
callBtn.addEventListener('click', callTaxi);
cancelBtn.addEventListener('click', cancelTaxi);
🧪 e.target повертає...
💡 style.display = 'none' — ховаємо елемент
💡 style.display = 'block' — показуємо елемент
💡 Іменовані функції — можемо додавати і видаляти слухачі
💡 Патерн: Викликати → Шукати → Скасувати/Знайти
💡 style.display = 'block' — показуємо елемент
💡 Іменовані функції — можемо додавати і видаляти слухачі
💡 Патерн: Викликати → Шукати → Скасувати/Знайти
▶️ Натисни RUN і перевір!
Введи адресу — лічильник оновлюється! Натисни "Викликати" → "Скасувати"!
🏆 Що ти вивчив:
✓
input — реагуємо на кожен символ
✓
change — реагуємо після завершення
✓
removeEventListener — видаляємо слухач
✓
Іменовані функції — для контролю слухачів
✅ Коли все працює:
Натисни "Готово" в редакторі!
⏱️ ~15 хв • Урок 3 з 8
Потрібна допомога?
💡 Підказка
🤖 AI-KOODI
index.html
✏️
style.css
app.js
1
2
3
4
5
6
7
8
9
10
🚖
Напиши код і натисни Run ▶