JS властивість Event.click

Загальний опис

click — це подія в HTML, яка спрацьовує, коли користувач натискає на елемент, наприклад, кнопку, посилання, зображення або будь-який інший елемент, здатний реагувати на кліки. Подія click є однією з найбільш часто використовуваних подій у веб-розробці, оскільки вона дозволяє взаємодіяти з елементами на сторінці за допомогою миші або сенсорного екрана. Вона також спрацьовує при натисканні клавіші Enter на клавіатурі, якщо фокус знаходиться на кнопці або посиланні.

При використанні події click можна прив'язати функцію-обробник до певного елемента. Ця функція виконується кожного разу, коли користувач натискає на цей елемент. Це відкриває широкі можливості для створення інтерактивних і динамічних веб-додатків. Наприклад, можна використовувати подію click для відправки форм, відкриття модальних вікон, зміни стилів або вмісту елемента, запуску анімацій і багато іншого.

Приклад використання події click:

const button = document.querySelector('button');

button.addEventListener('click', function(event) {
  alert('Кнопку натиснуто!');
});

У цьому прикладі, коли користувач натискає на кнопку, браузер відображає повідомлення "Кнопку натиснуто!". Це простий, але ефективний спосіб показати, як click можна використовувати для виклику певної дії після натискання кнопки.

Подія click також може бути використана для маніпуляції з DOM, оновлення стану програми або виклику функцій. Наприклад, ви можете додати подію click до елемента списку, щоб видалити його з DOM, або до зображення, щоб збільшити його масштаб. Важливо враховувати, що подія click може спрацьовувати і на мобільних пристроях при натисканні на екран, що робить її універсальною для роботи з усіма типами пристроїв.

Щоб уникнути непередбачених проблем, завжди слід переконатися, що обробник подій налаштовано правильно і виконує лише ті дії, які потрібні. Наприклад, якщо потрібно запобігти виконанню стандартної поведінки браузера, як-то перехід за посиланням, можна використовувати метод event.preventDefault() в обробнику події click.

правити

Порада

Щоб запобігти небажаним подіям, таким як перезавантаження сторінки при натисканні на посилання, використовуйте event.preventDefault() у своєму обробнику події. Це дозволяє вам повністю контролювати поведінку кліка.

автор: Bond правити

Порада

При використанні події click для елементів, які повинні реагувати тільки на лівий клік, перевірте властивість event.button. Значення 0 відповідає лівому кліку миші, що дозволить вам обмежити обробник тільки для нього.

автор: Bond правити

Порада

При використанні події click завжди враховуйте, що вона спрацьовує і при натисканні клавіші Enter на клавіатурі, якщо фокус знаходиться на елементі, як-от кнопка або посилання. Це корисно для забезпечення доступності вашого сайту.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('click', function(event) {
  // Код обробника події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<button id="toggleButton">Перемкнути</button>
<div id="content">Демонстраційний елемент</div>

const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');

toggleButton.addEventListener('click', function() {
  content.classList.toggle('hidden');
});

<button id="addButton">Додати</button>
<ul id="list">
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

const addButton = document.getElementById('addButton');
const list = document.getElementById('list');

addButton.addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.textContent = `Новий елемент ${list.children.length + 1}`;
  list.appendChild(newItem);
});