События DOM — это то, что делает веб-страницу интерактивной. Использование событий DOM — это то, что заставляет кликнуть страницу или отправить форму, и позволяет разработчикам создавать привлекательный пользовательский интерфейс.

Некоторые примеры событий DOM: когда пользователь щелкает мышью, когда загружается веб-страница, когда загружается изображение, когда отправляется форма HTML и когда пользователь нажимает клавишу.

В этой статье мы упростим ключевые концепции событий DOM и рассмотрим, как с ними обращаться.

1. добавить прослушиватель событий

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

Пример: Приведенный ниже код добавляет событие «click» для отображения сведений о коктейлях при нажатии на изображение.

`img.addEventListener('click', () => handleClick(cocktail));`

2. Селектор запроса

querySelector позволяет выбирать элемент с помощью селекторов, подобных CSS. Это один из самых универсальных способов таргетинга на элементы.

Пример: Этот код создает свертываемый раздел на веб-странице. document.querySelectorAll выбирает все элементы h3 на веб-странице и возвращает NodeList всех соответствующих элементов.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById и getElementsByClassName

getElementById нацелен на один элемент по его уникальному идентификатору.

Аналогично, getElementsByClassName выбирает все элементы определенного класса и возвращает их как коллекцию.

Пример: Ниже getElementById находит элемент по его атрибуту id в HTML-документе.

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

Эти значения затем сохраняются в свойствах объекта newCocktail, который определен с помощью const.

Таким образом, когда пользователь отправляет форму для создания нового коктейля, она сохраняется в структурированном виде внутри объекта newCocktail.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

Событие DOMContentLoaded гарантирует, что ваш JavaScript запускается только после полной загрузки DOM, предотвращая ошибки при попытке доступа к элементам до того, как они станут доступны.

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

Это гарантирует, что DOM полностью построен и доступен, поэтому вы можете безопасно взаимодействовать с элементами в HTML, например добавлять прослушиватели событий или манипулировать DOM.

В приведенном ниже коде браузер сообщает вам, что документ теперь доступен и пользователь может начать с ним взаимодействовать.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Заключительные замечания

События DOM имеют основополагающее значение для того, чтобы сделать веб-страницу интерактивной и привлекательной для пользователей. Понимая и используя основные методы, такие как addEventListener, querySelector, getElementById и getElementsByClassName, вы можете создавать динамические пользовательские интерфейсы, которые реагируют на клики, отправку форм и многое другое.

Кроме того, событие DOMContentLoaded гарантирует, что ваши сценарии будут выполняться только после полной загрузки DOM, предотвращая потенциальные ошибки и обеспечивая плавное взаимодействие с пользователем.

Подводя итог, события DOM позволяют:

• Прикрепите обработчики событий с помощью addEventListener для интерактивности.

• Выберите элементы с помощью querySelector или getElementById для динамического обновления содержимого.

• Управляйте действиями, инициируемыми событиями на основе пользовательского ввода, например отправкой формы.

• Убедитесь, что ваши сценарии выполняются в нужное время с помощью DOMContentLoaded.

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