Обработка событий JavaScript: освойте клики и взаимодействие с пользователем

Введение

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

В этой лаборатории вы изучите основные способы обработки событий в JavaScript. Мы начнем с базового атрибута onclick в HTML и перейдем к более мощному и гибкому методу addEventListener. Вы также узнаете, как использовать объект event для управления поведением событий и получения информации о событии.

К концу этой лаборатории вы сможете:

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

Приступим!

Добавьте атрибут onclick к HTML-элементу

На этом шаге вы узнаете самый прямой способ обработки события: использование атрибута обработчика событий HTML. Атрибут onclick позволяет выполнить фрагмент JavaScript-кода при нажатии на элемент. Хотя этот метод прост, как правило, лучше разделять HTML и JavaScript, что мы рассмотрим на следующих шагах.

Сначала добавим атрибут onclick к нашей кнопке.

В проводнике файлов слева от WebIDE найдите и откройте файл index.html.
Найдите элемент <button>.
Измените тег кнопки, добавив атрибут onclick, который отображает оповещение (alert).

Ваш измененный элемент <button> должен выглядеть следующим образом:

<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>

После добавления кода сохраните файл index.html.

Чтобы увидеть изменения, переключитесь на вкладку Web 8080 в верхней части интерфейса. Нажмите кнопку "Click Me", и вы должны увидеть всплывающее окно браузера с сообщением "Button Clicked!".

Используйте addEventListener для события click

На этом шаге мы будем использовать современный и рекомендуемый подход к обработке событий: метод addEventListener. Этот метод позволяет прикрепить обработчик событий к элементу, не смешивая ваш JavaScript-код с разметкой HTML. Эта практика известна как "ненавязчивый JavaScript" (unobtrusive JavaScript) и приводит к более чистому и поддерживаемому коду.

Сначала очистим наш HTML, удалив атрибут onclick, который мы добавили на предыдущем шаге.

Откройте файл index.html.
Удалите атрибут onclick из элемента <button>. Он снова должен выглядеть так:

<button id="myButton">Click Me</button>

Теперь добавим слушатель событий с помощью JavaScript.

Откройте файл script.js из проводника файлов. В настоящее время он пуст.
Добавьте следующий код в script.js:

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Clicked with addEventListener!");
});

Разберем этот код:

document.querySelector('#myButton'): Эта строка выбирает элемент кнопки из DOM по его идентификатору myButton.
addEventListener('click', ...): Этот метод вызывается для элемента кнопки. Он принимает два основных аргумента:
- Первый аргумент — это тип события, которое нужно отслеживать, в данном случае 'click'.
- Второй аргумент — это функция "обработчик" или "слушатель", которая будет выполнена при возникновении события. Здесь мы используем анонимную стрелочную функцию () => { ... }.

Сохраните файл script.js и переключитесь на вкладку Web 8080. Нажмите кнопку, и вы должны увидеть оповещение с сообщением "Clicked with addEventListener!".

Определите функцию обработчика событий

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

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

Давайте изменим наш файл script.js, чтобы использовать именованную функцию.

Откройте файл script.js.
Замените существующий код следующим:

const button = document.querySelector("#myButton");

function handleClick() {
  button.textContent = "I was clicked!";
}

button.addEventListener("click", handleClick);

Вот что изменилось:

Мы определили новую функцию под названием handleClick. Эта функция содержит логику, которая будет выполняться при нажатии на кнопку — в данном случае, она изменяет текст кнопки.
В addEventListener мы теперь передаем имя функции handleClick в качестве второго аргумента. Обратите внимание, что мы передаем саму ссылку на функцию, а не вызываем ее (то есть handleClick, а не handleClick()). Браузер вызовет функцию за нас, когда произойдет событие клика.

Сохраните файл script.js и перейдите на вкладку Web 8080. Нажмите на кнопку. На этот раз вместо оповещения вы увидите, как текст кнопки изменится на "I was clicked!".

Фрагмент кода, демонстрирующий определение функции обработчика событий

Предотвратите действие по умолчанию с помощью preventDefault

На этом шаге мы изучим объект event и один из его наиболее полезных методов: preventDefault(). Когда происходит событие, браузер автоматически передает объект event в функцию-обработчик. Этот объект содержит информацию о событии и позволяет управлять его поведением.

Некоторые HTML-элементы имеют действие по умолчанию. Например, действие по умолчанию для ссылки (тег <a>) — это переход по URL, указанному в ее атрибуте href. Метод event.preventDefault() позволяет остановить выполнение этого действия по умолчанию.

Наш файл index.html уже содержит ссылку с идентификатором myLink. Добавим к ней слушатель событий, чтобы предотвратить переход.

Откройте файл script.js.
Добавьте следующий код в конец файла:

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Проанализируем новый код:

Мы выбираем элемент <a> с идентификатором myLink.
Мы определяем функцию-обработчик handleLinkClick, которая принимает один параметр, названный нами event. Это будет объект события, предоставленный браузером.
Внутри функции мы вызываем event.preventDefault(), чтобы браузер не переходил по ссылке.
Мы также добавляем сообщение console.log, чтобы подтвердить, что наш обработчик выполняется.

Сохраните файл script.js. Теперь перейдите на вкладку Web 8080.

Щелкните правой кнопкой мыши в любом месте страницы и выберите "Inspect" (Проверить), чтобы открыть инструменты разработчика браузера.
Переключитесь на вкладку "Console" (Консоль) в инструментах разработчика.
Нажмите на ссылку "Visit LabEx (link will be disabled)".

Вы заметите две вещи: страница не переходит на labex.io, и в консоли появляется сообщение "Link click detected, navigation prevented.".

Вывод консоли, показывающий предотвращение клика по ссылке

Доступ к цели события с помощью event.target

На этом заключительном шаге мы узнаем о другом важном свойстве объекта event: event.target. Это свойство предоставляет ссылку на конкретный элемент, который вызвал событие. Это невероятно полезно, особенно когда у вас есть один слушатель событий на родительском элементе, управляющий событиями для нескольких дочерних элементов (техника, называемая делегированием событий).

Для этой лабораторной работы мы будем использовать event.target в более простом контексте: для изменения элемента, по которому непосредственно кликнули, без необходимости отдельной переменной для него.

Давайте изменим функцию handleClick для нашей кнопки, чтобы использовать event.target.

Откройте файл script.js.
Найдите функцию handleClick, которую вы написали в Шаге 3, и измените ее так, чтобы она принимала параметр event и использовала event.target.

Замените старую функцию handleClick этой новой версией:

function handleClick(event) {
  // event.target ссылается на кнопку, по которой кликнули
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

Вот разбивка:

Функция handleClick теперь принимает объект event в качестве параметра.
Вместо использования переменной button мы теперь используем event.target для ссылки на элемент, по которому кликнули.
event.target.style.backgroundColor = 'lightblue' изменяет цвет фона кликнутого элемента.
event.target.textContent = 'My color changed!' изменяет его текстовое содержимое.

Ваш полный файл script.js теперь должен выглядеть примерно так:

const button = document.querySelector("#myButton");

function handleClick(event) {
  // event.target refers to the button that was clicked
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

button.addEventListener("click", handleClick);

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Сохраните файл и переключитесь на вкладку Web 8080. Нажмите на кнопку. Вы увидите, как ее цвет фона изменится на светло-голубой, а текст обновится на "My color changed!".

Изменение фона и текста кнопки после клика

Резюме

Поздравляем с завершением лабораторной работы по обработке событий JavaScript! Вы успешно освоили основные концепции создания интерактивных веб-страниц путем реагирования на действия пользователя.

В этой лабораторной работе вы изучили:

Базовый атрибут onclick для простой обработки событий непосредственно в HTML.
Современный и предпочтительный метод addEventListener для разделения ответственности и поддержания чистоты кода JavaScript.
Как определять и использовать именованные функции в качестве обработчиков событий для лучшей организации и повторного использования кода.
Мощный объект event, используя event.preventDefault() для остановки стандартного поведения браузера.
Как идентифицировать элемент, вызвавший событие, с помощью свойства event.target.

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