Чего нам ожидать от этого блога
При таком большом количестве фреймворков на рынке и простоте добавления обработчиков событий разработчики склонны добавлять ненужные обработчики, где что-то можно сделать с меньшим количеством кода. Этот блог поможет вам понять некоторые основные концепции JavaScript, такие как всплывание событий и захват событий. Вы сможете воспользоваться этим и реализовать делегирование событий и измерение его эффективности.
Что такое событие?
«Событие» в веб-приложении может быть определено как действие, предпринимаемое в результате взаимодействия с пользователем, уведомления сервера или изменений зарегистрированного источника данных. С этими событиями связаны обработчики для выполнения некоторых действий.
Пример: нажмите кнопку
Вы когда-нибудь задумывались, как браузер понимает, где пользователь щелкнул такое массивное дерево / лес DOM? Браузер должен быть умным, чтобы эффективно это определять.
Браузеры используют концепцию под названием Сбор событий. Поговорим об этом подробнее.
Что такое захват событий?
Каждый раз, когда пользователь нажимает кнопку, браузер начинает выяснять, какой узел DOM был нажат. Но оно не знает ответа и некому его дать. Следующий шаг для браузера - начать спрашивать всех в дереве. Он начинается с корневого тега ‹html› и спрашивает: «Пользователь щелкнул вас?» Тег ‹html› говорит: «Не я, а один из моих детей». Затем он начинает спрашивать своих детей. Запрос тега ‹body› и так далее.
Наконец, он достигает тега ‹button› и отвечает: «Да, пользователь нажал на меня». Затем браузер прекращает операцию поиска, поскольку он обнаружил цель / источник события.
Этот процесс обнаружения целевого элемента, являющегося источником события, называется захват события.
Вау, а как насчет хендлеров? У нас может быть несколько обработчиков для одного действия, верно? Теперь, чтобы получить ответ на этот вопрос, вам нужно сначала понять всплывание событий.
Что такое всплытие событий?
После того, как мы захватили цель события, появляется всплытие события.
Это процесс, в котором событие передается своему родительскому элементу, чтобы узнать, есть ли для него какие-либо другие обработчики.
Допустим, у вас есть ‹button› внутри ‹div›. Вы можете добавить обработчики к ним обоим. Теперь с помощью этого механизма выполняются оба обработчика. Во-первых, целевой элемент получает приоритет, и событие переходит на более высокий уровень.
Пример:
Вывод:
Можете ли вы остановить это распространение?
Да мы можем. Есть определенные методы для объекта события, которые могут остановить это распространение, когда вы обнаружите, что все обрабатывается в определенных точках. Вы используете их, когда уверены, что событие обработало все случаи и больше нечего выполнять. Вы можете остановиться и позволить JavaScript выполнять другие задачи.
Пример:
Вывод:
Если вы посмотрите на вывод, второй обработчик не выполняется, потому что мы предотвратили его распространение.
Существует интересная концепция Делегирование событий, которая использует возможности восходящей цепочки событий и реализует лучший код.
Делегирование мероприятия:
Обработка нескольких событий на похожих (не строго) дочерних элементах в одном обработчике на родительском уровне может быть вызвана как делегирование событий.
Рассмотрим сценарий ниже. У нас есть 10 элементов ‹li›, при нажатии на них мы должны установить красный фон. Я привязал событие клика к каждому тегу ‹li›.
Пример,
вывод:
Вы увидите, что фон элемента ‹li› меняется, когда вы нажимаете на него. Но при этом не используется делегирование событий, потому что у всех элементов есть общий родительский элемент ‹ui›, который может обрабатывать каждый щелчок.
Реализация с делегированием событий:
вывод:
Как видите, мы используем один обработчик и управляем кликами по каждому элементу списка в одном месте.
Если вы обрабатываете несколько действий в одном месте, вам необходимо определить, какое из них вы выполняете в настоящее время. Для этого я прикрепил «id» к каждому элементу, и когда выполнение доходит до обработчика, он всегда будет иметь event.target в качестве элемента, по которому щелкают. По этому ключу мы сможем определить, на кого щелкнули.
Что такое target и currentTarget?
Это два термина, которые разработчики используют для определения того, кто обрабатывает событие, а кто его инициирует. В нашем случае ‹ui› является обработчиком, а ‹li› инициирует событие. Когда вы говорите event.target, это будет ваш ‹li› DOM. event.currentTarget будет вашим ‹ui› DOM.
Производительность:
Я много обещал для Делегирования мероприятий. Как мы можем это доказать? Я попытался измерить производительность на вкладке производительности в Chrome Developer Tool. Я использовал делегирование в одном месте и несколько обработчиков на другой стороне. У меня были следующие наблюдения:
Наблюдение первое: я использовал 1000 тегов ‹li›, и производительность была:
Без делегирования
с делегацией
Наблюдение второе: я использовал 100000 тегов ‹li›, и производительность была:
Без делегирования
с делегацией
Заключение
Я не был впечатлен полученными наблюдениями. Я обнаружил прирост производительности примерно на 100–200 мс. Я подумал, действительно ли мне нужно об этом беспокоиться? Но когда я посмотрел на свою DOM, я увидел, что подмножество для слишком раннего вынесения суждений будет неправильным. Рассмотрим дерево DOM электронной коммерции, насколько оно будет огромным? Это делает нас немного более уверенными в том, что да, делегирование событий - это способ повышения производительности, если учитывается обработка событий.
