Что такое обработка событий?
Обработка событий происходит, когда что-то происходит в ответ на выполняемую работу. Пользователь нажимает на название породы собак, и на его экране появляется фотография собаки. Пользователь нажимает кнопку отправки, и его отзыв добавляется в базу данных. Она наводит курсор на строку текста, и текст становится фиолетовым.
Давайте посмотрим на это с точки зрения магии. Мне нравится думать о событиях в двух частях: написание заклинания и наложение заклинания. Написание заклинания осуществляется в виде функции обратного вызова.
Что такое функция обратного вызова?
Поскольку функции в 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')
Существует множество различных типов прослушивателей событий, и их использование добавляет невероятное количество функциональных возможностей приложению. Если это соответствует вашим потребностям, к одному и тому же элементу можно даже добавить несколько прослушивателей событий. Если вы хотите украсить свое приложение и предоставить пользователям более интерактивный опыт, ознакомьтесь с приведенными ниже ресурсами. Спасибо, что зашли!
Ресурсы: