Senior Event Notes

1. Event Flow

When the browser is developed into the fourth generation (IE4AndNetscape Communicator 4), the browser development team encountered a very interesting
Question: Which part of the page will have a specific event? To understand what the question is, you can imagine drawing it on a piece of paper.
A set of concentric circles. If you put your finger on the center of the circle, your finger is pointing not to a circle, but to all the circles on the paper. Two families
The Company's browser development team is consistent in its view of browser events. If you click on a button, they all think the click Thing
Not only on the button. In other words, when you click a button, you also click the container element of the button, and even click the entire
A page.
Event FlowDescribes the order in which events are received from the page. But the interesting thing is thatIe and Net Scape The development team actually put forward the difference
IE piece captures the stream. From the above concept can be learned: As long as the HTML element is a nested relationship, the corresponding event attributes are triggered, according to the above rule implementation.

< Span style= "color: #000000; font-family:fzssjw--gb1-0; font-size:10pt; Font-style:normal; Font-variant:normal; " >< Span style= "color: #000000; font-family:fzssjw--gb1-0; font-size:10pt; Font-style:normal; Font-variant:normal; " >
I The event flow of E is called event bubbling, where the event starts with the most specific element (the node with the deepest level
in the document) and then propagates up to the less specific node (document)

< Span style= "color: #000000; Font-family:timesnewroman; font-size:10pt; Font-style:normal; Font-variant:normal; " >< Span style= "color: #000000; Font-family:timesnewroman; font-size:10pt; Font-style:normal; Font-variant:normal; " > bubble skips the bubbling to the Window object.

< Span style= "color: #000000; Font-family:timesnewroman; font-size:10pt; Font-style:normal; Font-variant:normal; " >< Span style= "color: #000000; Font-family:timesnewroman; font-size:10pt; Font-style:normal; Font-variant:normal; " > is that less specific nodes should receive the event earlier, and the most specific node should receive the event at the end. Event capture is intended to capture a
event before it reaches a predetermined destination. If you still use the previous HTML page as an example of the event capture, click <div> the
element will trigger the Click event in the following order.

Although event capture is the only event flow model supported by Netscape Communicator, IE9, Safari, Chrome, Opera
and Firefox currently support this event flow model as well. Although the "DOM2 level Event" specification requires an event to be from the Document object
Start propagating, but these browsers start capturing events from the Window object.
Because older browsers do not support it, very few people use event capture. We also advise readers to use event bubbling with confidence,
Use event capture when there is a special need.

Summary: Event flow is the order in which an HTML document accepts event handlers, divided into event bubbling, event capture

Senior Event Notes