Event capture, event bubbling, and event delegation in Javascript

Event bubbling: the deepest element of event promotion first receives events. Then, the parent element of the object goes up until the document Object finally receives the event. Although a document does not have an independent visual representation relative to an html element, it is still the parent element of an html element and events can bubble to the document element.

Concept

Event bubbling: the deepest element of event promotion first receives events. Then, the parent element of the object goes up until the document Object finally receives the event. Although a document does not have an independent visual representation relative to an html element, it is still the parent element of an html element and events can bubble to the document element.
Let's talk about event capture.
Event Capture: events first occur on the top object (document) of the DOM tree and then spread to the deepest element. (Note that IE6 is only bubble and not captured)
Event delegation: I think event delegation converts event listening to its parent element by using the bubble principle, that is, binding the event to the parent element, then, obtain the child element object in the event and perform corresponding operations on it. Advantages: 1. Improve performance 2. Reduce the amount of code

Instance event bubbling instance 1

Events are executed in the bubble stage by default.
First, check the following code: