“This is the 16th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.
Before we talk about the flow of events, let’s look at events.
The interaction between JavaScript and HTML is achieved through events. Events: Are specific moments of interaction that occur in a document or browser window. We can use listeners (or event handlers) to reserve events so that the appropriate code is executed when the event occurs. In plain English, certain behaviors occur when we perform certain actions (such as mouse clicks) on certain elements of a page. Like clicking a button and popping up a dialog box. This involves the button click event, which produces the action of popping up a dialog box.
Events first appeared in IE3 and Netscape Navigator2 as a way to share the load of server computing. Internet Explorer 4 and Navigator4 offer similar but different apis at launch ———————————————— The original link: blog.csdn.net/lixiaosenli…
Let’s talk about the three phases of the event flow:
The capture event flow handler is called first, then the itself event flow handler, and finally the bubbling event flow handler is called
1. Capture the event stream
What is capturing a stream of events? To put it simply, it is to find and execute from the outside in level by level. It’s like looking for Window, then DOM, then HTML — >body and so on
2. Itself
3. Bubbling event flow
Definition: When a child element event is triggered, all of its parent elements’ events of the same name ‘are triggered in sequence
A bubbling event stream is the opposite of a capture event stream. It starts at the bottom and works its way up, like a bubble, from the bottom
If you want to see the sequence of events, use: e.ventphase
If you want to block the stream of events: e.topPropagation () (both bubbling and capturing can be blocked)
AddEventListener (‘ event type ‘, event handler, true/false) True captures event stream, false bubbles event stream