.addEventListener() в JavaScript

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

Введение в .addEventListener()

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

Синтаксис .addEventListener() выглядит следующим образом:

element.addEventListener(event, handlerFunction);

Где:

• element
  • это HTML-элемент, на котором мы хотим отслеживать событие.
• event
  • это строка, представляющая событие, на которое мы хотим реагировать (например, "click", "mouseover", "keydown" и т. д.).
• handlerFunction
  • это функция, которая будет вызвана при возникновении события.

Примеры использования .addEventListener()

Давайте рассмотрим несколько примеров использования метода .addEventListener() для различных событий.

1. Обработка кликов мышью

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

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

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

При клике на кнопку появится всплывающее окно с сообщением "Кнопка была нажата!".

2. Обработка наведения курсора мыши

<div id="myDiv">Наведи курсор на меня</div>

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

// Добавляем обработчик события для наведения курсора на элемент
myDiv.addEventListener('mouseover', function() {
  myDiv.style.color = 'red';
});

// Добавляем обработчик события для выхода курсора из элемента
myDiv.addEventListener('mouseout', function() {
  myDiv.style.color = 'black';
});

Когда курсор мыши наводится на элемент <div>, его текст становится красным, а когда курсор покидает элемент, цвет возвращается к черному.

3. Обработка ввода текста

<input type="text" id="myInput">

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

// Добавляем обработчик события для ввода текста в поле ввода
myInput.addEventListener('input', function() {
  console.log('Введен текст:', myInput.value);
});

Каждый раз, когда пользователь вводит текст в поле ввода, это значение отображается в консоли браузера.

Заключение

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