Введение в прослушиватели событий

Итак, у вас есть красивая страница с HTML и CSS, но теперь вы пытаетесь понять, как на самом деле ИСПОЛЬЗОВАТЬ кнопки и формы, которые вы создали, верно? Вот тут-то и появляется JavaScript с «слушателями событий».

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

В этом руководстве мы узнаем, как прикреплять прослушиватели событий к элементам DOM, как их удалять и использовать анонимные функции вместо именованных.

Добавление прослушивателей событий к элементам DOM

Чтобы начать работу с прослушивателями событий, нам нужно знать, как прикреплять их к различным элементам DOM. JavaScript предоставляет для этой цели метод addEventListener. Этот метод требует события, такого как щелчок или отправить, а также функцию обратного вызова для выполнения действия. Я настоятельно рекомендую ознакомиться со статьей MDN о прослушивателях событий для получения списка событий, которые вы можете использовать. Ниже приведены несколько примеров событий, которые мы можем использовать:

Пример 1. Обработка нажатия кнопки

const button = document.getElementById('MyButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

В этом примере мы сначала выбираем вашу кнопку с идентификатором «MyButton» и устанавливаем для нее переменную, чтобы сделать наш код более модульным. Далее мы настраиваем прослушиватель событий. Для метода addEventListener требуется «событие» (в данном примере это «щелчок») и функция обратного вызова (функция стрелки). Теперь, если мы нажмем кнопку на веб-странице, наша консоль должна показать «Кнопка нажата!».

Пример 2. Реакция на наведение курсора мыши

Теперь давайте применим то, что мы узнали из предыдущего примера, и попробуем создать прослушиватель событий, который изменит цвет элемента div при наведении на него курсора мыши, а также при выходе из элемента div:

const divElement = document.getElementById('myDiv');

divElement.addEventListener('mouseover', () => {
  divElement.style.backgroundColor = 'lightgreen';
});
divElement.addEventListener('mouseout', () => {
  divElement.style.backgroundColor = 'lightblue';
});

Легкий!

Пример 3: прослушивание изменений ввода

Другим распространенным прослушивателем событий, который используется, является событие «input». Это можно использовать, например, всякий раз, когда пользователю нужно ввести текст в текстовое поле и сохранить текст. Или, может быть, на вашу веб-страницу добавлен фильтр, основанный на том, что вводит пользователь!

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('input', (event) => {
  console.log('Input value:', event.target.value);
  // Add your code to react to changes in the input field.
});

В этом коде мы встречаемся с чем-то новым: event.target. Это позволяет нам нацеливаться на конкретную область, где происходит событие. Это может быть очень полезно во многих приложениях, позволяя программисту гибко выбирать цель.

Удаление прослушивателей событий

Хотя добавление прослушивателей событий имеет важное значение, их удаление, когда они больше не нужны, не менее важно для предотвращения утечек памяти. Давайте посмотрим, как удалить прослушиватель событий:

const removeButton = document.getElementById('removeButton');

function handleClick() {
  console.log('Button clicked!');
}
removeButton.addEventListener('click', handleClick);
// Suppose you want to remove the event listener after the first click.
removeButton.addEventListener('click', () => {
  removeButton.removeEventListener('click', handleClick);
  console.log('Event listener removed!');
});

Слушатели событий с анонимными функциями и именованными функциями

При определении прослушивателей событий у вас есть возможность использовать анонимные функции или именованные функции. Оба эти варианта имеют свое применение. Давайте рассмотрим разницу между ними:

const anonButton = document.getElementById('anonButton');
const namedButton = document.getElementById('namedButton');

// Using an anonymous function as the event listener.
anonButton.addEventListener('click', () => {
  console.log('Anonymous function: Button clicked!');
});
// Using a named function as the event listener.
function handleButtonClick() {
  console.log('Named function: Button clicked!');
}
namedButton.addEventListener('click', handleButtonClick);

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

Заключение

Поздравляем! Вы только что узнали об удивительном инструменте, который лежит в основе каждой веб-страницы. Хотя это и не исчерпывающее руководство, теперь у вас есть достаточно знаний, чтобы экспериментировать с различными обработчиками событий в собственном коде. Удачного кодирования!