JavaScript - addEventListener(): Врата к интерактивным веб-страницам

Здравствуйте, будущие маги JavaScript! Сегодня мы погрузимся в один из самых мощных инструментов вашего набора для веб-разработки: метод addEventListener(). К концу этого урока вы сможете заставить ваши веб-страницы танцевать под вашу дудку!

Что такое addEventListener()?

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

На языке JavaScript, addEventListener() позволяет вам слушать_specificные события на HTML-элементах и отвечать на них с помощью пользовательской функциональности.

Синтаксис

Давайте рассмотрим базовый синтаксис:

element.addEventListener(event, function, useCapture);

Вот что означает каждая часть:

• element: HTML-элемент, к которому вы хотите привязать событие.
• event: Строка, которая specifies тип события, на которое нужно listens (например, "click", "mouseover").
• function: Функция, которая будет выполнена при наступлении события.
• useCapture: Опциональный булев параметр (мы рассмотрим это позже).

Теперь давайте посмотрим, как это работает на практике!

Примеры

1. Классический клик по кнопке

Давайте начнем с самого распространенного примера: реагирование на клик по кнопке.

HTML:

<button id="myButton">Нажми меня!</button>

JavaScript:

// Сначала мы получаем ссылку на нашу кнопку
const button = document.getElementById("myButton");

// Теперь мы добавляем обработчик событий для события 'click'
button.addEventListener("click", function() {
alert("Кнопка нажата!");
});

В этом примере мы говорим JavaScript слушать событие 'click' на нашей кнопке. Когда это происходит, он показывает alert. Просто, правда?

2. Изменение стилей при наведении курсора

Давайте сделаем вещи немного интереснее. Мы изменим стиль элемента, когда курсор наведен на него.

HTML:

<div id="colorBox" style="width: 100px; height: 100px; background-color: blue;">
Наведи на меня курсор!
</div>

JavaScript:

const box = document.getElementById("colorBox");

box.addEventListener("mouseover", function() {
this.style.backgroundColor = "red";
});

box.addEventListener("mouseout", function() {
this.style.backgroundColor = "blue";
});

Здесь мы используем два обработчика событий: один для 'mouseover' (когда курсор enters элемент) и один для 'mouseout' (когда он leaves). Обратите внимание, как мы используем this для ссылку на элемент, к которому привязано событие.

3. Базовая валидация формы

Теперь давайте tries что-то более практичное: базовую валидацию формы.

HTML:

<form id="myForm">
<input type="text" id="nameInput" placeholder="Введите ваше имя">
<button type="submit">Отправить</button>
</form>

JavaScript:

const form = document.getElementById("myForm");
const nameInput = document.getElementById("nameInput");

form.addEventListener("submit", function(event) {
if (nameInput.value.trim() === "") {
event.preventDefault(); // Prevents the form from submitting
alert("Пожалуйста, введите ваше имя!");
}
});

Этот скрипт listens для события 'submit' на форме. Если поле для имени пусто, он предотвращает отправку формы и показывает alert. Обратите внимание на параметр event в функции - это дает нам доступ к объекту события, который имеет методы, такие как preventDefault().

4. События клавиатуры

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

HTML:

<div id="gameArea">
Нажми правильную клавишу!
<p id="targetKey"></p>
<p id="message"></p>
</div>

JavaScript:

const targetKey = document.getElementById("targetKey");
const message = document.getElementById("message");
let currentKey = "";

function setNewTarget() {
currentKey = String.fromCharCode(65 + Math.floor(Math.random() * 26));
targetKey.textContent = `Target key: ${currentKey}`;
}

document.addEventListener("keydown", function(event) {
if (event.key.toUpperCase() === currentKey) {
message.textContent = "Правильно! Молодец!";
setNewTarget();
} else {
message.textContent = "Ой! Попробуй еще раз!";
}
});

setNewTarget(); // Начать игру

Этот скрипт устанавливает случайную целевую клавишу и listens для событий 'keydown' на всем документе. Затем он проверяет, соответствует ли нажатая клавиша целевой.

Типы событий

Существует множество типов событий, на которые можно listens. Вот таблица некоторых из них:

Тип события	Описание
click	Когда элемент clicked
mouseover	Когда курсор enters элемент
mouseout	Когда курсор leaves элемент
keydown	Когда нажата клавиша
keyup	Когда клавиша released
submit	Когда отправлена форма
load	Когда страница или изображение загрузилось
change	Когда изменено значение input элемента
focus	Когда элемент получает фокус
blur	Когда элемент теряет фокус

Заключение

И вот вы его получили, друзья! Вы только что открыли силу addEventListener(). С этими знаниями вы можете создавать динамичные, интерактивные веб-страницы, которые respond к действиям пользователя в реальном времени.

Remember, ключ к maîtriser этого (и любого программного концепта) - это практика. Попробуйте combining разные события, experiment с различными HTML-элементами и, что наиболее важно, получайте удовольствие от этого!

Кто знает? Возможно,下一大的互动网站将是由你建造的，使用你今天学到的技能。 Happy coding, и пусть ваши обработчики событий всегда будут внимательны!

Credits: Image by storyset