Что такое обработка событий?

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

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

Что такое функция обратного вызова?

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

Один из способов написать функцию обратного вызова — объявить функцию отдельно. Здесь мы «пишем заклинание», которое говорит: «Когда событие произойдет, сделайте текст фиолетовым».

function mouseoverPurple(e){
   e.target.style.color ="purple";
}

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

Выбор элемента на странице

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

<h3>Here is a list:</h3>
<ul id="list">
  <ul>First Item</ul>
  <ul>Second Item</ul>
  <ul>Third Item</ul>
</ul>

Есть много способов найти элемент. Как заявляет W3 Schools, элементы можно найти по их идентификатору, имени тега, имени класса, селекторам CSS или коллекциям объектов HTML.

Самый простой способ сделать это — захватить элемент по его идентификатору. Поскольку идентификаторы уникальны, это помогает избежать путаницы, когда приложение становится более сложным. Мы возьмем наш таким образом и установим значение константы с именем «ul»:

const ul = document.getElementById("list");

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

Добавление прослушивателя событий

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

Слушатель событий запрашивает два аргумента: тип события, которое мы «прослушиваем», и функцию обратного вызова, которая происходит, когда компьютер «слышит» событие.

Здесь мы говорим: «Событие — это наведение курсора мыши, и цель этого события — наша ul, которую мы захватили. Когда происходит наведение курсора мыши на один из элементов нашего списка, разыгрывайте то заклинание, которое мы написали. Это изменит цвет нашей ul на фиолетовый.»:

ul.addEventListener('mouseover', mouseoverPurple)

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

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

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

ul.addEventListener('mouseover', (e) => {
   e.target.style.color = 'purple';
})

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

ul.addEventListener('mouseover', e => e.target.style.color = 'purple')

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

Ресурсы: