The basic idea of a bubbling event is that the event is triggered in the order from the most specific event target to the least specific event target (Document object).
The IE5.5 bubble sequence is as follows:
(1) <div>
(2) <body>
(3) <document>
Why it's called bubbling, because events are rising like blisters in the DOM hierarchy. Reminds me of a song: "Blowing bubbles, blowing bubbles, bubbles fly, fly high, fly to the sky, ask the sun good."
IE6, slightly modified the bubbling event, so that the
The bubbling order of the IE6 is as follows:
(1) <div>
(2) <body>
(3)
(4) <document>
The Mozilla1.0 and later versions also support bubbling events but reach another level. Similar to IE6.0, it also supports
Capture-type event:
IE uses bubbling events, relative, Netscape using another solution called capture events (eventcapturing), the capture of events, and the two processes that are just the opposite of bubbling-capturing events, events starting from the most imprecise objects (document objects), Then to the most precise (also can capture the event at the window level, but must be specifically specified by the developer). Netscape does not expose many elements on the page to events. Continue to use the previous code example, the event is propagated as follows:
(1) Document
(2) <div>
Some people also call it a top-down event model, because it extends downward from the top of the DOM hierarchy:
Dom Event Flow:
The DOM (Document Object model) structure is a tree structure, and when an HTML element produces an event, the event propagates in a particular order between the element node and the root node, and the node that passes through the path receives the event, which can be called the DOM event stream. There are two types of event order: event snapping and event bubbling.
DOM-standard event model
We have explained and compared the above two different event models. The DOM standard supports both event models, the capture-type event and the bubbling event, but the captured event occurs first. Both event streams trigger all objects in the DOM, starting with the document object and ending with the Document object (most compliant browsers continue to persist the event as snap/bubbling to the Window object). Continue to use the previous example, when you click the <div> element in a DOM-compatible browser, the event flow is as follows:
Note that because the object of the event (<div> Element) is the most precise element (and therefore, the deepest in the DOM tree), it actually receives two events, one time during the capture process and another during the bubbling process. The most unique nature of the DOM event model is that text nodes also trigger events (not in IE). So if you click <div> click </div> in the example, the actual event flow should be:
Reference Document: JavaScript Advanced Programming
Bubbling events, captured events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
