Обработка событий в JavaScript: руководство для начинающих по изменению DOM

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

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

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

Вы также можете ознакомиться с другими моими сериями статей для начинающих по JavaScript, которые перечислены ниже.

Чтобы быстро освежить в памяти DOM и получить доступ к DOM, вы можете проверить здесь

Прежде чем мы начнем, очень важно понять события и типы событий в JavaScript. Теперь приступим к делу.

Понимание событий JavaScript

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

1. События мыши:

• Событие клика: происходит, когда пользователь щелкает элемент.
• Событие Mouseover: происходит, когда элемент перемещается указателем мыши.
• Событие Mouseout: происходит, когда указатель мыши покидает элемент.
• Событие прокрутки: происходит, когда пользователь прокручивает страницу

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

• Событие нажатия клавиши: происходит, когда пользователь нажимает клавишу на клавиатуре.
• Событие Keydown: происходит, когда пользователь нажимает клавишу
• Событие Keyup: происходит, когда пользователь отпускает клавишу

3. События формы:

• Событие отправки: происходит, когда пользователь отправляет форму
• Событие изменения: происходит, когда пользователь изменяет значение элемента формы.
• Событие фокуса: происходит, когда элемент получает фокус
• Событие размытия: происходит, когда элемент теряет фокус

4. Документируйте события:

• Событие DOMContentLoaded: происходит, когда HTML-документ полностью загружен и проанализирован.
• Событие загрузки: происходит, когда все внешние ресурсы (изображения, скрипты и т. д.) загружены.
• Событие выгрузки: происходит, когда пользователь покидает страницу или закрывает окно браузера.

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

const button = document.querySelector('button');

button.addEventListener('click', function() {
  alert('Button clicked!');
});

В этом примере мы сначала выбираем элемент кнопки с помощью метода querySelector. Затем мы используем метод addEventListener, чтобы зарегистрировать прослушиватель событий щелчка для элемента кнопки. Второй параметр метода addEventListener — это функция, которая будет выполняться при нажатии кнопки. В этом случае мы просто показываем предупреждающее сообщение, в котором говорится: «Кнопка нажата!»

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

const input = document.querySelector('input');

input.addEventListener('keypress', function(event) {
  console.log(`Key pressed: ${event.key}`);
});

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

Изменение модели модели

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

Вот некоторые распространенные методы манипулирования DOM в JavaScript:

1. Выбор элементов:

• document.getElementById(): выбирает элемент по его идентификатору
• document.querySelector(): выбирает первый элемент, соответствующий селектору CSS.
• document.querySelectorAll(): выбирает все элементы, соответствующие селектору CSS.

2. Добавление элементов:

• document.createElement(): создает новый элемент HTML
• parentElement.appendChild(): Добавляет элемент в конец родительского элемента
• parentElement.insertBefore(): вставляет элемент перед указанным дочерним элементом

3. Удаление элементов:

• parentElement.removeChild(): удаляет дочерний элемент из родительского элемента

4. Изменение атрибутов и содержимого элемента:

• element.setAttribute(): устанавливает значение атрибута элемента
• element.getAttribute(): получает значение атрибута элемента
• element.innerHTML: устанавливает или получает содержимое HTML внутри элемента.
• element.textContent: устанавливает или получает текстовое содержимое внутри элемента

Вот пример нового элемента, который создается и добавляется в DOM:

const parentElement = document.querySelector('.container');
const newElement = document.createElement('div');
newElement.textContent = 'Hello, world!';
parentElement.appendChild(newElement);

В этом примере мы используем метод querySelector для выбора родительского элемента с именем класса «контейнер». Затем, используя метод createElement, мы создаем новый элемент «div» и устанавливаем его текстовое содержимое на «Hello, world!». Наконец, мы используем метод appendChild, чтобы добавить новый элемент в конец родительского элемента.

Аналогичные методы можно использовать для удаления или изменения существующих элементов на странице. Например, вот как удалить элемент из DOM:

const elementToRemove = document.getElementById('myElement');
const parentElement = elementToRemove.parentElement;
parentElement.removeChild(elementToRemove);

В этом примере мы используем метод getElementById для выбора элемента с идентификатором myElement. Затем, используя свойство parentElement, мы получаем его родительский элемент и используем метод removeChild для удаления элемента из родителя.

Обработчики событий

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

Вот несколько примеров распространенных событий, которые вы можете обрабатывать в JavaScript:

• click: активируется при нажатии на элемент
• mouseover: Когда указатель мыши входит или наводится на элемент, запускается событие
• mouseout: срабатывает, когда указатель мыши покидает элемент
• keydown: срабатывает при нажатии клавиши на клавиатуре
• keyup: срабатывает при отпускании клавиши на клавиатуре
• submit: срабатывает при отправке формы

Метод addEventListener можно использовать для добавления обработчика событий к элементу. Пример добавления обработчика события клика к кнопке показан ниже:

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

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

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

function handleButtonClick() {
  console.log('Button clicked!');
}

const button = document.querySelector('button');
button.addEventListener('click', handleButtonClick);

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

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

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Form submitted!');
});

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

Практическое применение

Теперь, когда вы знаете, как использовать события и обработчики событий в JavaScript, давайте рассмотрим несколько реальных примеров. Вот несколько примеров:

1. Проверка формы

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

const emailInput = document.querySelector('#email');
emailInput.addEventListener('input', function(event) {
  const email = event.target.value;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    emailInput.setCustomValidity('Please enter a valid email address.');
  } else {
    emailInput.setCustomValidity('');
  }
});

В этом примере мы выбираем элемент ввода с идентификатором «email» и прикрепляем к нему обработчик события «вход». Обработчик событий проверяет, соответствует ли значение поля ввода регулярному выражению для допустимого адреса электронной почты. Если ввод недействителен, мы устанавливаем специальное сообщение об ошибке в поле ввода, используя метод setCustomValidity. Если ввод правильный, сообщение об ошибке удаляется.

2. Динамические пользовательские интерфейсы

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

const toggleButton = document.querySelector('#toggle');
const content = document.querySelector('#content');
toggleButton.addEventListener('click', function() {
  content.classList.toggle('hidden');
});

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

3. Анимированные эффекты

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

const box = document.querySelector('#box');
box.addEventListener('mouseover', function() {
  box.style.backgroundColor = 'red';
});
box.addEventListener('mouseout', function() {
  box.style.backgroundColor = 'blue';
});

В этом примере мы будем использовать поле ID для выбора элемента div. Когда пользователь наводит курсор на поле, мы добавляем обработчик события mouseover event, который меняет цвет фона на красный. Мы также включаем обработчик события mouseout, который возвращает синий цвет фона, когда пользователь отводит мышь от поля.

Это лишь некоторые из множества практических применений событий и обработчиков событий JavaScript. Вы можете создавать динамичные и привлекательные пользовательские интерфейсы для своих веб-страниц, комбинируя события с другими технологиями веб-разработки, такими как CSS и HTML.

Заключение

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

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

Помните, что практика является ключом к освоению событий. Итак, продолжайте экспериментировать с различными типами событий и обработчиками событий и не бойтесь пробовать что-то новое. Со временем и практикой вы приобретете навыки и знания, необходимые для того, чтобы стать опытным разработчиком JavaScript.

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