Пошук уроків, статей та іншого контенту
addEventListener, об'єкт події та найпоширеніші типи подій, на які реагують сторінки.
Подія — це сигнал про те, що щось відбулося: користувач клікнув, ввів текст, надіслав форму, сторінка завантажилась. Браузер генерує події постійно; JavaScript може «підписатись» на конкретні події конкретних елементів і виконати код у відповідь.
const button = document.querySelector("#save-btn");
button.addEventListener("click", () => {
console.log("Кнопку натиснуто");
});Можна підписати кілька незалежних обробників на одну й ту саму подію того самого елемента — усі виконаються:
button.addEventListener("click", () => console.log("Перший обробник"));
button.addEventListener("click", () => console.log("Другий обробник"));
// клік виведе обидва рядкиОбробник автоматично отримує об'єкт події як аргумент — він містить деталі про те, що саме відбулось:
button.addEventListener("click", (event) => {
console.log(event.type); // "click"
console.log(event.target); // сам елемент, на якому відбулась подія
});click — клік мишею (або тап на сенсорному екрані).
input — значення поля вводу змінилось (спрацьовує на кожне натискання клавіші).
submit — форму надіслано (детальніше в уроці про форми).
keydown / keyup — натискання чи відпускання клавіші клавіатури.
change — значення елемента змінилось і втратило фокус (для select, checkbox, file input).
DOMContentLoaded — HTML повністю розпарсений (на document, альтернатива атрибуту defer з модуля «Вступ до JavaScript»).
Деякі елементи мають вбудовану типову поведінку (посилання переходять за href, форми перезавантажують сторінку при submit) — preventDefault() скасовує саме її, не заважаючи іншим обробникам виконатись:
document.querySelector("a").addEventListener("click", (event) => {
event.preventDefault(); // посилання НЕ перейде за href
console.log("Перехід скасовано, обробляємо клік по-своєму");
});Щоб видалити обробник, потрібне посилання саме на ту функцію, яку передавали в addEventListener — анонімна стрілкова функція, написана прямо всередині виклику, видалити себе не дозволяє:
function handleClick() {
console.log("Клік");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick); // спрацює — те саме посилання на функцію
// А так НЕ спрацює:
button.addEventListener("click", () => console.log("Клік"));
button.removeEventListener("click", () => console.log("Клік")); // інша функція, хоч і виглядає однаковоlet count = 0;
const button = document.querySelector("#counter-btn");
const display = document.querySelector("#counter-display");
button.addEventListener("click", () => {
count += 1;
display.textContent = count; // textContent з попереднього уроку
});Спроба видалити обробник, переданий як анонімна функція — потрібне однакове посилання на функцію для addEventListener і removeEventListener.
Забутий preventDefault там, де типова поведінка браузера (перезавантаження сторінки при submit форми) заважає задуманій логіці.
Підписка на подію до того, як елемент з'явився в DOM (наприклад, скрипт виконується раніше за розмітку) — детальніше про порядок виконання скриптів дивіться в модулі «Вступ до JavaScript».
addEventListener підписує функцію-обробник на подію конкретного елемента; обробник отримує об'єкт події з деталями (type, target). preventDefault скасовує типову поведінку браузера, не зупиняючи інші обробники. Наступний урок покаже, що відбувається, коли подія стосується вкладених елементів одночасно — спливання та делегування.
Спробуйте самостійно
Створіть поле вводу та підпишіться на подію "input" — виводьте поточну довжину введеного тексту в сусідній елемент щоразу, коли користувач друкує.