3.5 События и обработчики событий
4 из 4 шагов пройдено
3 из 3 баллов  получено

 Урок 3.5: События и обработчики событий

Цели урока:
- Понять, что такое события в контексте веб-разработки и как они работают.
- Изучить создание и назначение обработчиков событий в JavaScript.
- Научиться использовать события для взаимодействия с пользователем и управления поведением веб-страницы.

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

1. Работа с событиями

- Добавление обработчика событий:
  Существует несколько способов добавления обработчиков событий в JavaScript. Один из наиболее распространенных — использование метода `addEventListener`.

<button id="clickMeButton">Нажми на меня</button>
document.getElementById("clickMeButton").addEventListener("click", function() {
  alert("Кнопка была нажата!");
});

- Удаление обработчика событий:
  Для удаления обработчика событий используется метод `removeEventListener`.

function handleClick() {
  alert("Кнопка была нажата!");
}

const button = document.getElementById("clickMeButton");
button.addEventListener("click", handleClick);
// Позже, для удаления обработчика
button.removeEventListener("click", handleClick);

 

2. Всплытие и перехват событий

- Всплытие событий означает, что события, происходящие на элементах, расположенных глубже в DOM, автоматически передаются их родителям и так далее вверх по цепочке.
- Перехват событий (capturing) — это процесс, при котором событие перехватывается на своем пути вниз к элементу, на котором оно было вызвано.

  Вы можете управлять этими процессами через третий параметр в `addEventListener`.

// Сначала выполнится второй обработчик (всплытие), затем первый (перехват)
element.addEventListener("click", handleCapture, true); // Перехват
element.addEventListener("click", handleBubble, false); // Всплытие

 

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

Когда событие происходит, браузер создает объект события, передаваемый в обработчик как аргумент. Этот объект содержит детали о событии, такие как тип события, целевой элемент, состояние клавиш-модификаторов (Ctrl, Shift и т.д.), и многое другое.

document.getElementById("clickMeButton").addEventListener("click", function(event) {
  console.log(event.type); // "click"
  console.log(event.target); // ссылка на элемент, который был кликнут
});

 Задание для самостоятельной работы

1. Создайте веб-страницу с несколькими элементами: кнопкой, текстовым полем и блоком для вывода текста.
2. Добавьте обработчики событий так, чтобы при нажатии на кнопку в блок выводился текст из текстового поля, а при клике на блок текста — текст очищался.

Заключение

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


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