О, и как мы достигли самого конца.
Автор — Раджашри Пархи| Под редакцией — Арка Сенгупта
Если у вас хорошая память, то вы должны помнить, что встроенное событие может быть вызвано действием пользователя. Например, нажатие кнопки мыши, нажатие на клавиатуру или прикосновение к сенсорной поверхности — это некоторые из встроенных событий, которые помогают определить, что именно происходит в приложении.
Однако иногда встроенных событий недостаточно для отслеживания состояния приложения. Например, при использовании веб-сайта электронной коммерции мы нажимаем на объект, и он добавляется в корзину. Просто, верно? Но отображение общего количества товаров, добавленных в корзину, обрабатывается родительским компонентом. Итак, мы хотим сообщить родительскому компоненту, чтобы он обновил свои значения, т. е. «Элемент был добавлен, пожалуйста, покажите обновленное количество». И есть ли у нас какое-либо такое событие обновления корзины для отправки? Увы!
Но по шагам — Пользовательские события, чтобы спасти положение и править Семью королевствами!
Как создавать собственные события в JavaScript?
Есть несколько способов сделать это —
- Конструктор событий
- Конструктор CustomEvent
Конструктор событий
В приведенном выше фрагменте мы создали событие newevent, передав имя события в конструктор событий. Имена событий нечувствительны к регистру, поэтому newevent совпадает с newEvent и NewEvent и т. д.
пузыри — указывает, должно ли событие распространяться вверх к родительскому элементу. Для большинства собственных событий DOM это правда, но для пользовательского события по умолчанию это ложь.
Если вы хотите понять, что такое всплытие событий, загляните сюда.
cancelable. Как следует из названия, оно указывает, следует ли отменить событие. Собственные элементы DOM по умолчанию можно отменить. Вот почему мы можем использовать event.preventDefault(), чтобы предотвратить действие события по умолчанию. Если для пользовательского события для отмены установлено значение false, вызов event.preventDefault() не будет выполнять никаких действий.
composed- Указывает, должно ли событие всплывать из теневого DOM. Но если для «пузырьков» установлено значение «ложь», значение «составлено» не имеет значения.
Краткое объяснение теневого DOM. Это помогает инкапсулировать часть дерева DOM, к которой нельзя случайно получить доступ из основного документа.
Конструктор CustomEvent
Как показано выше, создание пользовательского события с помощью конструктора CustomEvent аналогично созданию события с помощью конструктора Event.
Единственная разница заключается в том, что объект передается в качестве второго параметра конструктору, то есть detail. Используя detail, мы можем передавать данные слушателю.
Это дополнительное преимущество по сравнению с конструктором Events, потому что в большинстве случаев мы хотели бы отправлять данные из того места, где событие отправляется слушателю.
Как отправить событие?
- Мы создали пользовательское событие с помощью CustomEvent.
- Мы отправили пользовательские события цели с помощью dispatchEvent()
- Мы добавили прослушиватель событий к элементу, который хотели прослушивать.
Вот краткий пример
Я составил список дел, в котором количество оставшихся задач уменьшается каждый раз, когда мы вычеркиваем задачу!
Каждый раз, когда мы нажимаем на любой из элементов, задача удаляется, что означает завершенную задачу.
Я добавил прослушиватель событий в список . Обработчик делает две вещи: во-первых, он добавляет «завершенный» класс CSS к целевому элементу, а во-вторых, он отправляет пользовательское событие, которое обрабатывает уменьшение количества задач.
У вас может возникнуть вопрос, что мы могли бы просто уменьшить количество сразу после добавления класса CSS вместо создания пользовательского события. Определенно, да, мы могли бы это сделать. Но моя цель здесь — показать, как вы можете использовать настраиваемые события для разделения кода, который вы хотите выполнить после завершения другого фрагмента кода.
Демо
Краткий факт. Пользовательские события также называются искусственными событиями.
Заключительные мысли
Пользовательские события помогают отделить события, которые помогают поддерживать большие кодовые базы. Например, мы можем выделить прослушиватели событий в отдельный скрипт. Кроме того, у нас может быть несколько прослушивателей событий для одного и того же пользовательского события. Это лишь некоторые из преимуществ пользовательских событий. Лучшие фреймворки JavaScript, такие как VueJS, expressJS, активно используют пользовательские события.
Не стесняйтесь поиграть с моим кодом для лучшего понимания — https://github.com/rajashree23/events/tree/master/UnderstandingEvents-Part3 😄
Если вы хотите ознакомиться с моими предыдущими статьями об понимании событий, перейдите по ссылкам ниже —
Часть 1- https://medium.com/behind-the-tech-chainwhiz/understanding-events-part-1-6624900e3f4
Часть 2- https://medium.com/behind-the-tech-chainwhiz/understanding-events-part-1-6624900e3f4
Следите за публикациями Chainwhiz, чтобы быть в курсе постоянных обновлений и новых статей!
