Home > Developer > JavaScript
The basic idea of a bubble event is that an event is triggered in sequence from the most specific event target to the least specific event Target (document Object.
[Html]
<Html>
<Head>
<Title> </title>
</Head>
<Body onclick = "theClick ()">
<Div onclick = "theClick ()"> click </div>
</Body>
</Html>
The bubble sequence of IE5.5 is as follows:
(1) <div>
(2) <body>
(3) <document>
Why is it bubble, because events are constantly rising like bubbles according to the DOM hierarchy. It reminds me of a song: "blowing bubbles, flying bubbles, flying high, flying into the sky, and asking the sound of the Sun ".
IE6, slightly modified the bubble event, so that the The bubble sequence of IE6 is as follows:
(1) <div>
(2) <body>
(3) (4) <document>
Mozilla1.0 and later versions also support bubble events but reach another level. Similar to IE6.0, it also supports
Captured events:
IE uses a bubble event, a relative event, and Netscape, and uses another event called eventcapturing) solution, event capture, and bubble are just the opposite of the two processes -- capture events, events from the most inaccurate object (document Object) start to trigger, and then to the most accurate (you can also capture events at the window level, but it must be specified by developers ). Netscape does not expose many elements on the page to events. Continue to use the previous sample code and events to spread them in the following path:
(1) document
(2) <div>
Some people also call it the top-down event model because it extends down from the top of the DOM hierarchy:
DOM event stream:
The DOM (Document Object Model) structure is a tree structure. When an HTML element generates an event, the event will be transmitted in a specific order between the element node and the root node, all nodes passing through the path will receive the event. This propagation process is called the DOM event stream. There are two types of event sequence: Event capture and event bubbling.
DOM standard event model
We have explained and compared the two different event models above. The DOM standard supports both capture and bubble event models. However, capture events occur first. Both event streams trigger all objects in the DOM, starting from the document object, also ends with the document Object (most compatible standard browsers will continue to capture/bubble events to the window object ). Continue to use the previous example, click the <div> element in the DOM-compatible browser, and run the event stream as follows:
Note that because the event Target (<div> element) is the most precise element (as a result, the deepest element in the DOM tree), it will actually receive two events, one in the capture process, another time in the bubble process. The most unique feature of the DOM event model is that text nodes also trigger events (not in IE ). Therefore, if you click <div> click </div> In the example, the actual event stream should be:
Reference document: javaScript Advanced Programming
From Dan's column
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
