On the event bubbling and event capture of JS

What is an event?

Events are specific moments of interaction that occur in a document and in a browser window. The event is the heart of the JavaScript app beating, and the glue that sticks everything together, and when we interact with the Web page in the browser for some type of interaction, the event occurs.

An event might be a user clicking on something, a mouse passing through a particular element, or pressing some key on the keyboard, something that might happen in a Web browser, such as when a Web page is loaded, or when a user scrolls or changes the window size.

Event Flow:

The event flow describes the order in which events are accepted from the page, but interestingly, the Microsoft (IE) and Netscape (Netscape) development team has proposed two diametrically opposed event flow concepts,IE's event flow is the event bubbling stream (bubbling), The event stream of the Netscape is the event capture stream (capturing).

　　　Event bubbling:

The event stream proposed by IE is called event bubbling, that is, when the event starts with the most specific element, and then propagates up to the less specific node, take a look at the following example:

<! DOCTYPE html>functionp () {Console.log (' P tag is clicked ')       }        functionbtn () {Console.log ("Button is clicked")        }         functionDivclick (Event) {Console.log (' Div is clicked '); }        functionBodyclick () {Console.log (' Body is clicked ')        }    </script></body>
Next we click on the P element on the page to see what happens:
As we said above, it will be received from one of the most specific elements, then spread upward, p=>button=>div=>body ... Event bubbling can be figuratively likened to putting a stone into the water, and bubbles will come up from the bottom.
On the event bubbling and event capture of JS