Работа с событиями: Event Listeners в JavaScript

Что такое события?

События в JavaScript представляют собой действия, происходящие на веб-странице, такие как щелчок мыши, нажатие клавиши, загрузка страницы и другие. События могут быть привязаны к элементам на странице, чтобы обрабатывать действия пользователя.

Создание Event Listener

Для прослушивания событий и реагирования на них, вы можете использовать метод addEventListener элемента DOM. Вот пример создания Event Listener для кнопки:

// Найти элемент кнопки по идентификатору
let кнопка = document.getElementById('мояКнопка');

// Создать Event Listener для щелчка кнопки
кнопка.addEventListener('click', function() {
  alert('Кнопка была нажата!');
});

В этом примере мы находим элемент кнопки по его идентификатору и добавляем Event Listener, который будет выполнять код, когда произойдет событие "click" (щелчок).

Удаление Event Listener

Если вы хотите удалить Event Listener, вы можете использовать метод removeEventListener. Вот пример:

function обработчикСобытия() {
  alert('Событие произошло!');
}

let элемент = document.getElementById('мойЭлемент');
элемент.addEventListener('click', обработчикСобытия);

// Позже, где-то в вашем коде
элемент.removeEventListener('click', обработчикСобытия);

Объект события

Когда событие происходит, JavaScript создает объект события, который содержит информацию о событии. Вы можете использовать этот объект, чтобы получить информацию о событии, такую как координаты мыши, клавишу, которая была нажата, и многое другое.

элемент.addEventListener('click', function(event) {
  console.log('X-координата щелчка: ' + event.clientX);
  console.log('Y-координата щелчка: ' + event.clientY);
});