JavaScript learning notes (5) event processing: event stream and event processing function allocation

If you click a button on the page for example, you click the button first and then the action is passed in to the container of the button, after the Document is imported to the entire page, the Document is clicked first, and then the container of the button. What about the button click? If you click a button on the page for example, you click the button first and then the action is passed in to the container of the button, after the Document is imported to the entire page, the Document is clicked first, and then the container of the button. What about the button click?
JavaScript can handle this problem by calling it an event stream, that is, the event propagation mechanism. There are different interpretations of the event stream IE and FF. The solution in IE is called a bubble event, while FF is called a capture event. As the name implies, a bubble event is a low-level trigger mechanism, while a capture event is a top-down trigger mechanism. The book Javascript advanced programming mentions:
DOM Event streams support both event triggering mechanisms, but capture events occur first. Note that because the event Target (that is, the deepest node in the DOM tree) is the most precise element, in fact it will receive two consecutive events, one in the capture process, one is in the bubble process. Is it true? Observe the following program:


JAVASCRIPT event stream