savvyiorew.blogg.se

Here's the diagram to help you visualise this easily: 💡 In the event capturing phase, the event is first captured until it reaches the target element Now, if you click element2, you will see element1 is clicked is printed first followed by element2 is clicked. For element2, omitting or passing false will register the event handler in the bubbling phase. We have added true for useCapture parameter indicating that we are registering our event handler for element1 in the capturing phase. And you, as a web developer, can register your event handler in this phase by setting true as the third argument inside the addEventListener method. In the event capturing phase, the event is first captured until it reaches the target element ( event.target). 💡 Event bubbling is just one side of the coin Event capturing is the other. We mostly have been dealing with event bubbling when working with frameworks like React and never think much of another phase which is Event Capturing. The event flow mechanism in the W3C event model is Bi-directional. Now, the interesting bit is that event flow is not uni-directional, as you might have assumed. 💡 In event bubbling the innermost target element handles the event first and then it bubbles up in the DOM tree

In event bubbling the innermost target element handles the event first, and then it bubbles up in the DOM tree looking for other ancestor elements with registered event handlers. This phenomenon is known as Event bubbling, and it's a core part of the W3C event model.

The answer is element2 is clicked, followed by element1 is clicked. What do you think will be the output when you click element2? 🤔 Enter fullscreen mode Exit fullscreen mode