Пошук уроків, статей та іншого контенту
Опрацюєте події натискання кнопок миші, руху курсора, наведення та виходу з елементів.
Подія миші — це сигнал від браузера про дію користувача з мишею або іншим вказівним пристроєм.
Наприклад:
користувач натиснув кнопку;
відпустив кнопку миші;
перемістив курсор;
навів курсор на елемент;
вивів курсор за межі елемента;
відкрив контекстне меню правою кнопкою.
Щоб реагувати на подію, потрібно:
отримати HTML-елемент;
додати обробник події;
виконати потрібний код, коли подія станеться.
Для додавання обробника найчастіше використовують метод addEventListener():
element.addEventListener("назва-події", function () {
// Код, який виконається під час події
});Наприклад:
<button id="helloButton">Привітатися</button>
<script>
const button = document.querySelector("#helloButton");
button.addEventListener("click", function () {
alert("Привіт!");
});
</script>Після натискання кнопки з’явиться повідомлення Привіт!.
Обробник можна записати через стрілкову функцію:
button.addEventListener("click", () => {
alert("Привіт!");
});clickПодія click відбувається після натискання і відпускання кнопки миші на елементі.
Вона підходить для більшості звичайних дій: натискання кнопок, перемикання станів, відкриття меню тощо.
<button id="counterButton">Натиснуто: 0</button>
<script>
const button = document.querySelector("#counterButton");
let count = 0;
button.addEventListener("click", () => {
count += 1;
button.textContent = `Натиснуто: ${count}`;
});
</script>Подія click виникає не лише для елементів <button>. Її можна обробляти для блоків, посилань та інших елементів:
<div id="box">Натисніть на мене</div>
<script>
const box = document.querySelector("#box");
box.addEventListener("click", () => {
box.textContent = "Ви натиснули на блок";
});
</script>mousedown і mouseupПодія mousedown відбувається в момент натискання кнопки миші.
Подія mouseup відбувається в момент відпускання кнопки миші.
Послідовність для звичайного натискання зазвичай така:
mousedown;
mouseup;
click.
<button id="actionButton">Натисніть кнопку</button>
<p id="status">Очікування дії</p>
<script>
const button = document.querySelector("#actionButton");
const status = document.querySelector("#status");
button.addEventListener("mousedown", () => {
status.textContent = "Кнопку натиснуто";
});
button.addEventListener("mouseup", () => {
status.textContent = "Кнопку відпущено";
});
</script>Ці події корисні, коли потрібно розділити момент натискання та момент відпускання. Наприклад, так можна створити ефект натиснутої кнопки або керувати малюванням.
dblclickПодія dblclick виникає після подвійного натискання елемента.
<div id="message">Двічі клацніть на цей текст</div>
<script>
const message = document.querySelector("#message");
message.addEventListener("dblclick", () => {
message.textContent = "Подія подвійного натискання спрацювала";
});
</script>Подвійне натискання також може спричинити подію click двічі. Тому не варто без потреби призначати для одного елемента незалежні дії і на click, і на dblclick: вони можуть конфліктувати.
contextmenuПодія contextmenu виникає під час відкриття контекстного меню, зазвичай після натискання правої кнопки миші.
За замовчуванням браузер показує власне контекстне меню. Його можна скасувати методом event.preventDefault().
<div id="area">Натисніть правою кнопкою миші</div>
<script>
const area = document.querySelector("#area");
area.addEventListener("contextmenu", (event) => {
event.preventDefault();
area.textContent = "Стандартне контекстне меню вимкнено";
});
</script>Скасовувати стандартне меню варто лише тоді, коли ви замінюєте його власним меню або маєте іншу чітку причину. В інших випадках користувач може втратити звичну функціональність браузера.
Для реагування на наведення курсора найчастіше використовують події:
mouseover — курсор увійшов на елемент або один із його дочірніх елементів;
mouseout — курсор вийшов з елемента або перейшов на інший дочірній елемент;
mouseenter — курсор увійшов у межі елемента;
mouseleave — курсор залишив межі елемента.
Простий приклад із mouseenter і mouseleave:
<div id="card">Наведіть курсор</div>
<style>
#card {
width: 220px;
padding: 30px;
background-color: lightgray;
text-align: center;
transition: background-color 0.2s;
}
</style>
<script>
const card = document.querySelector("#card");
card.addEventListener("mouseenter", () => {
card.style.backgroundColor = "lightgreen";
card.textContent = "Курсор усередині";
});
card.addEventListener("mouseleave", () => {
card.style.backgroundColor = "lightgray";
card.textContent = "Наведіть курсор";
});
</script>mouseenter і mouseleave зручні для простих ефектів наведення, оскільки не спрацьовують повторно під час переходу курсора між дочірніми елементами.
mouseover і mouseenterРозглянемо блок із внутрішнім елементом:
<div id="outer">
Зовнішній блок
<span id="inner">Внутрішній текст</span>
</div>Коли курсор переходить із зовнішнього блоку на span:
mouseover може спрацювати ще раз;
mouseenter не спрацьовує повторно для зовнішнього блоку.
Тому:
використовуйте mouseenter і mouseleave для звичайних ефектів наведення;
використовуйте mouseover і mouseout, якщо вам потрібно відстежувати переходи між дочірніми елементами.
mousemoveПодія mousemove виникає під час руху курсора над елементом.
Обробник може виконуватися дуже часто, тому в ньому не варто без потреби виконувати складні операції.
У кожного обробника події можна отримати об’єкт події. Він містить інформацію про поточну дію.
<div id="workArea">
<p id="coordinates">Рухайте курсор у межах області</p>
</div>
<style>
#workArea {
width: 400px;
height: 200px;
border: 2px solid steelblue;
position: relative;
}
#coordinates {
margin: 10px;
}
</style>
<script>
const workArea = document.querySelector("#workArea");
const coordinates = document.querySelector("#coordinates");
workArea.addEventListener("mousemove", (event) => {
coordinates.textContent = `X: ${event.offsetX}, Y: ${event.offsetY}`;
});
</script>Властивості координат:
event.clientX — координата курсора відносно видимої області браузера;
event.clientY — координата курсора відносно видимої області браузера;
event.pageX — координата відносно всієї вебсторінки, включно з прокрученою частиною;
event.pageY — координата відносно всієї вебсторінки;
event.offsetX — координата відносно цільового елемента;
event.offsetY — координата відносно цільового елемента.
Об’єкт події зазвичай передають параметром функції-обробника:
element.addEventListener("click", (event) => {
console.log(event);
});Корисні властивості об’єкта події:
event.target — елемент, на якому фактично сталася подія;
event.currentTarget — елемент, на якому зареєстровано поточний обробник;
event.button — кнопка миші, яка спричинила подію;
event.clientX і event.clientY — координати курсора;
event.shiftKey — чи натиснуто Shift;
event.ctrlKey — чи натиснуто Ctrl;
event.altKey — чи натиснуто Alt;
event.metaKey — чи натиснуто Meta, наприклад клавішу Command у macOS.
Властивість event.button найчастіше має такі значення:
0 — ліва кнопка;
1 — середня кнопка або натискання коліщатка;
2 — права кнопка.
<div id="mouseArea">Натисніть будь-яку кнопку миші</div>
<script>
const mouseArea = document.querySelector("#mouseArea");
mouseArea.addEventListener("mousedown", (event) => {
if (event.button === 0) {
mouseArea.textContent = "Натиснуто ліву кнопку";
} else if (event.button === 1) {
mouseArea.textContent = "Натиснуто середню кнопку";
} else if (event.button === 2) {
mouseArea.textContent = "Натиснуто праву кнопку";
}
});
</script>Нижче наведено невеликий приклад, який використовує кілька подій миші:
click змінює колір;
mouseenter показує повідомлення про наведення;
mouseleave повертає початковий текст;
mousemove показує координати курсора;
contextmenu блокує стандартне контекстне меню.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Події миші</title>
<style>
body {
font-family: Arial, sans-serif;
}
#interactiveBox {
width: 320px;
height: 180px;
padding: 20px;
background-color: #dbeafe;
border: 2px solid #2563eb;
border-radius: 8px;
cursor: pointer;
user-select: none;
}
#coordinates {
margin-top: 12px;
}
</style>
</head>
<body>
<div id="interactiveBox">
Наведіть курсор або натисніть на блок
</div>
<p id="coordinates">Координати: —</p>
<script>
const box = document.querySelector("#interactiveBox");
const coordinates = document.querySelector("#coordinates");
box.addEventListener("mouseenter", () => {
box.textContent = "Курсор усередині блока";
});
box.addEventListener("mouseleave", () => {
box.textContent = "Наведіть курсор або натисніть на блок";
coordinates.textContent = "Координати: —";
});
box.addEventListener("mousemove", (event) => {
coordinates.textContent =
`Координати: X = ${event.offsetX}, Y = ${event.offsetY}`;
});
box.addEventListener("click", () => {
const currentColor = getComputedStyle(box).backgroundColor;
if (currentColor === "rgb(219, 234, 254)") {
box.style.backgroundColor = "#bbf7d0";
} else {
box.style.backgroundColor = "#dbeafe";
}
});
box.addEventListener("contextmenu", (event) => {
event.preventDefault();
box.textContent = "Праве натискання перехоплено";
});
</script>
</body>
</html>Щоб видалити обробник, потрібно передати в removeEventListener() ту саму функцію, яку передавали під час додавання.
const button = document.querySelector("#button");
function showMessage() {
alert("Кнопку натиснуто");
}
button.addEventListener("click", showMessage);
// Після цього обробник більше не працюватиме
button.removeEventListener("click", showMessage);Анонімну функцію, додану без збереження посилання, видалити таким способом не можна:
button.addEventListener("click", () => {
alert("Повідомлення");
});
// Це інша функція, тому попередній обробник не буде видалено
button.removeEventListener("click", () => {
alert("Повідомлення");
});Неправильно:
button.addEventListener("click", showMessage());У такому випадку showMessage() викликається одразу під час виконання програми.
Правильно:
button.addEventListener("click", showMessage);Або:
button.addEventListener("click", () => {
showMessage();
});Імена подій чутливі до регістру. Правильно писати:
button.addEventListener("click", handler);Неправильно:
button.addEventListener("Click", handler);target і currentTargetevent.target — елемент, на якому відбулася подія.
event.currentTarget — елемент, для якого зараз виконується обробник.
Ця різниця особливо важлива, коли елемент має вкладені елементи.
mousemoveОбробник mousemove може виконуватися десятки або сотні разів за короткий час. Не змінюйте в ньому без потреби велику кількість елементів і не запускайте складні обчислення.
mouseover для простого наведенняЯкщо елемент містить дочірні елементи, mouseover може спрацьовувати кілька разів під час переміщення між ними. Для звичайного ефекту наведення частіше підходить mouseenter.
Метод preventDefault() скасовує стандартну дію браузера. Не використовуйте його без чіткої причини, інакше можна погіршити взаємодію користувача зі сторінкою.
Події миші дають змогу реагувати на дії користувача:
click — натискання;
mousedown — натискання кнопки миші;
mouseup — відпускання кнопки миші;
dblclick — подвійне натискання;
contextmenu — відкриття контекстного меню;
mousemove — рух курсора;
mouseenter — наведення на елемент;
mouseleave — вихід курсора за межі елемента;
mouseover і mouseout — входження та вихід із елемента з урахуванням дочірніх елементів.
Для реальних програм зазвичай достатньо addEventListener(), об’єкта події та кількох його властивостей, зокрема target, button і координат курсора.
Після цього уроку ви вмієте:
додавати обробники подій миші;
реагувати на натискання та відпускання кнопок;
обробляти подвійне натискання;
створювати ефекти наведення;
відстежувати рух курсора;
отримувати координати курсора;
визначати натиснуту кнопку миші;
скасовувати стандартне контекстне меню;
видаляти обробники подій.