Главная » Статьи » Обрабатывайте события JavaScript как профессионал

Обрабатывайте события JavaScript как профессионал

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

События

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

Чтобы кнопка прослушивала событие, вам необходимо зарегистрировать прослушиватель или обработчик (любой термин, который вам подходит больше). Допустим, у нас есть нажатие кнопки, и мы хотим зарегистрировать событие на кнопке, чтобы измерить, сколько раз была нажата кнопка. Вот как мы это сделаем.

В этом примере мы взяли элемент кнопки с идентификатором using querySelector и прикрепили к нему событие, используя addEventListener.

Распространение событий

Теперь, когда мы знаем, что такое событие и как прикрепить eventListener к элементу. Давайте просто посмотрим, как это работает и сколько событий запускается при нажатии кнопки (может удивить многих из вас).

<html> <body> <div id="button"> <button class="button">Click me</button> </div> </body>
</html>

Что вы думаете? На скольких элементах срабатывает событие клика, если я нажимаю эту кнопку выше?

Без сомнения, это будет сама кнопка, но это также будут все предки кнопки и даже объекты document и window. Почему? Давайте узнаем.

Событие в основном распространяется в 3 фазы:

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

Целевая фаза: событие находит свой целевой элемент и запускается, когда пользователь выполнил взаимодействие.

Фаза пузыря: событие поднимается по иерархии так же, как и во время фазы захвата, пока не достигнет документа и окна.

Обрабатывайте события JavaScript как профессионал

Пузырьки событий

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

Теперь посмотрим, как всплывает событие в действии.

Вы могли заменить несколько вещей, глядя на консоль.

При нажатии на белую часть ничего не происходит.

При нажатии на зеленый запускается событие GrandParent.

При щелчке по желтому цвету запускается как родительское событие, так и GrandParentevent.

При нажатии на синий запускаются все три родителя, GrandParent и дочернее событие.

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

Делегирование событий

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

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

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

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

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

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

Заключение

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

Автор: Divyesh

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.