Всплывающие события и фиксация событий — это наиболее часто задаваемые вопросы на начальных собеседованиях. Поэтому сегодня мы подробно обсудить их с примерами. Итак приступим 😁.
Поэтому, прежде чем обсуждать всплывающие окна и захват событий, мы сначала поймем, что такое событие и прослушиватель событий.
Что такое событие 🤔. Событие – это взаимодействие, которое вы совершаете с веб-страницей, которое может быть любого типа, например (событие клика, нажатие клавиши и т. д.)
Что такое прослушиватель событий 🤔 – прослушиватель событий – это функция, которую вы прикрепляете к событию. , этот прослушиватель событий будет ожидать возникновения события. Мы можем прикрепить прослушиватель событий к определенному элементу или ко всему документу. Всякий раз, когда происходит событие, этот прослушиватель будет вызываться. Прослушиватель событий принимает три параметра в качестве входных, первый является типом события, а второй один – это функция обратного вызова, а третий параметр – это логическое значение, которое указывает событию захватывать или всплывать, мы подробно обсудим третий параметр в следующей части блога.
Теперь разберемся с всплывающими окнами событий и захватом событий в деталях 😁
Что такое всплывающая вспышка событий 🤔 — Всплывающие события означают, что распространение события происходит от элемента, где произошло событие (в нашем случае дочерний элемент), к самый верхний элемент (документ). Чтобы добиться всплытия событий, нам нужно передать третий параметр как false в прослушиватель событийили, если вы пропустите третий параметр, то по умолчанию он будет считаться ложным.
В приведенном выше примере мы видим сценарий всплытия событий, в этом примере мы прикрепили прослушиватели для события щелчка для всех трех элементов ( ребенок, родитель, бабушка и дедушка), а также для тега body и всего документа.
Теперь мы поймем, что происходит в приведенном выше коде. Поэтому, когда вы нажимаете на дочерний элемент, как мы обсуждали ранее, событие пройти весь путь от дочернего элемента к самому верхнему элементу. Самый верхнийэлемент — это документ.
Теперь мы увидим вывод события click для дочернего элемента, а затем приступим к объяснению.
Как вы можете видеть на снимке экрана выше, когда вы нажимаете на дочерний элемент, вызывается слушатель, прикрепленный к этому элементу, затем parentэлемента, затем вызывается прародитель, затем тело, а затем вызывается документ. Вы можете увидеть порядок выполнения с номером рядом с выходом.
Я думаю, вы уже поняли, что событие всплывает 😊😊
Теперь мы увидим захват событий😉
Что такое захват событий 🤔. Под захватом событий понимается распространение события, которое начинается с самого верхнего элемента. и доходит до элемента, где произошло фактическое событие (в нашем случае это дочерний элемент). Проще говоря, мы можем сказать, что захват событий — это полная противоположность всплывающей всплывающей подсказке событий.
В приведенном выше примере мы видим сценарий захвата событий, в этом примере мы прикрепили прослушиватели для события щелчка для всех трех элементов. (child, parent, grandparent) для тега body, а также для всего документа.
Теперь мы поймем, что происходит в приведенном выше коде. Поэтому, когда вы нажимаете на дочерний элемент, как мы обсуждали ранее, событие пройти весь путь от самого верхнего элемента до дочернего элемента. Самый верхнийэлемент — это документ.
Теперь мы увидим вывод события click для дочернего элемента, а затем приступим к объяснению.
Как вы можете видеть на приведенном выше снимке экрана, когда вы нажимаете на дочерний элемент, самый верхний элемент является документом, поэтому прикрепленный к нему прослушиватель событий вызывается, а затем вызывается прослушиватель событий тега тела, затем вызывается прародительский , вызывается родительский и дочерний > вызывается прослушиватель событий. Вы также можете увидеть тот же порядок на скриншоте выше.
Я думаю, теперь вы понимаете, что такое захват событий и всплывание событий👌😍
Теперь перенесем эту концепцию на следующий уровень, обсудив другой скрытый сценарий. До сих пор мы обсуждали всплытие событий и захват событий, когда все события находятся в фазе всплытия или когда все события находятся в фазе захвата. Теперь мы обсудим, что происходит, когда у всех обработчиков есть пузыри, а у одного есть захват? Теперь мы обсудим это подробно на примере.
Примечание. Захват имеет наивысший приоритет при вызове, а не всплывающую статистику. Это означает, что сначала будут вызываться обработчики, имеющие фазу захвата, а затем фазу всплывающей передачи. Это будет понятно на примере.
В приведенном выше примере вы можете видеть, что все слушатели находятся в фазе всплывания, потому что мы передаем false в качестве третьего параметра, кроме >прослушиватель прародительского элемента находится в этапе захвата, потому что мы передаем true в качестве третьего параметра.
Итак, как мы уже обсуждали, захват будет иметь наивысший приоритет над всплывающей подсказкой. Итак, что произойдет, если вы нажмете на дочерний элемент, и каков будет вывод для приведенного выше примера? Попробуйте ответить самостоятельно.
Как вы можете видеть на снимке экрана выше, несмотря на то, что у нас есть всплывающие всплывающие окна для дочернего элемента. Во-первых, на выходе мы получили дедушку и бабушку, затем дочернюю часть, потом родителя, затем тело, а затем документ. Таким образом, вы можете четко понять, что сначала происходит захват, а затем всплытие.
Если вы понимаете это, вы можете ответить на любые вопросы, которые возникнут у вас на пути 😍😍😍.
Важные ключевые моменты:
- Всплывающие события или захват событий работают для одного и того же типа событий.
2. если вы не передадите третий параметр, по умолчанию он будет считаться всплывающим.
3. Сначала происходит захват, а затем всплывающая подсказка.
Если у вас есть какие-либо сомнения, пожалуйста, прочитайте блог еще раз с помощью приведенных примеров, и если у вас все еще есть сомнения, пожалуйста, укажите их в разделе комментариев.
Спасибо, что прочитали ❤️
Если вы найдете это полезным, пожалуйста, поделитесь этим со своими друзьями 😉
Если вы хотите узнать, как работает замыкание, прочитайте мою статью об этом по этой ссылке Что такое замыкания в Javascript
