Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

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

1. Метод addEventListener

Метод addEventListener — один из популярных методы прослушивания событий. Он имеет три параметра:

  • Объект, представляющий событие.
  • Функция для обработки.
  • Необязательное логическое значение useCapture, описывающее, как событие распространяется по DOM.

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

Функция может быть анонимной или именованной. Популярные цели включают элемент, его дочерние элементы, документ и окно, поддерживающее событие.

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

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

Давайте проиллюстрируем следующий код:

HTML>
<HTML>
<тело>
<h1>Метод addEventListener с функциямиh1>
<кнопкаидентификатор="мойБтн">Кликните сюдакнопка>
<пидентификатор="демо">п>
тело>
HTML>

Затем добавьте прослушиватель событий с помощью кнопки.

константа элемент = документ.getElementById("мойБтн");
element.addEventListener("щелкнуть", мояФункция1);
функциямояФункция1() {
документ.getElementById("демо").innerHTML += "Функция выполнена! "
}

Когда вы нажимаете кнопку, на экране печатается текст «Функция выполнена», как показано ниже.

2. Делегирование событий для addEventListener

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

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

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

HTML>
<HTML>
<тело>
<h1> Делегирование событий на кнопкахh1>
<див>
<кнопка>Кнопка 1кнопка>
<кнопка>Кнопка 2кнопка>
<кнопка>Кнопка 3кнопка>
див>
тело>
HTML>

Затем добавьте прослушиватели событий ко всем кнопкам всего несколькими строками кода.

константа дел = документ.querySelector('див')
div.addEventListener("щелкнуть", (событие) => {
если (event.target.tagName 'КНОПКА') {
консоль.бревно(«Кнопка нажата»)
 }
});

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

3. Использование атрибута onclick

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

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

HTML>
<HTML>
<тело>
<h1> Выполнение событий onClickh1>
<пидентификатор="демо"по щелчку="моя функция()">
 Нажмите на меня, чтобы изменить цвет текста.
п>
тело>
HTML>

В файле JavaScript добавьте следующий код:

функциямоя функция() {
документ.getElementById("демо").стиль.цвет = "красный";
}

Вывод будет выглядеть так, как показано:

Зачем изучать прослушиватели событий?

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