Home > Developer > JavaScript
Let's look at the following sample code:
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><title>Event bubbling and event capture in JavaScript</title></Head><Body> <DivID= "Red"style= "width:200px;height:200px;background-color:red;padding:20px;"> <DivID= "Bule"style= "width:160px;height:160px;background-color:blue;padding:20px;"> <DivID= "Yellow"style= "width:120px;height:120px;margin:auto;background-color:yellow;padding:20px;"> <DivID= "Green"style= "width:80px;height:80px;margin:auto;background-color:green;padding:20px;"></Div> </Div> </Div> </Div></Body></HTML>
The effect is as follows:
Considering this, we use the mouse to click the most middle of the green, triggering the Green Div's Click event, that also triggered its parent yellow block of click events, as well as the ancestor level of the blue and Red block click event?
Early browser developers Netscape and Microsoft agreed that the Click event did trigger a click event at the parent and ancestor levels!!!
I. Flow of events
The event flow describes the order in which events are received from the page, although IE and Netscape both acknowledge the existence of the event stream, but put forward the concept of an event flow that is quite the opposite of the bad. The event stream of IE is the event bubbling stream, and the Netscape event stream is the event capture stream.
Second, event bubbling stream
The event bubbling stream means that the event starts with the element that was initially triggered, propagates up the first level, and triggers an ancestor-level event until the document object.
So if we click on the green block in the graph, the Click event should occur in the order that HTML--------------Blue----
Iii. Event Capture Flow
The event capture stream, in contrast to the event bubbling stream, starts firing from the outermost layer until the most specific element.
So if we click on the green block in the graph, the click event should take place in the order that it should happen, Blue---Yellow, Red-----------
Iv. implementation of event flow
The event flow defined in the "DOM2 level event" of the wide-set is supported both the event capture phase and the event bubbling phase. We can use the two methods provided by the "DOM2 level Event" AddEventListener () and RemoveEventListener () to bind or delete an event handler for a particular element:
Element.addeventlistener (event, function, Usecapture)
Element.removeeventlistener (event, function, Usecapture)
Event: Names of events to be processed
Function: Functions of event handlers
Usecapture: Boolean value specifies which event stream to use. False takes the event bubbling stream, and true takes the event capture stream.
Take a look at the following JavaScript code:
<script type = "Text/javascript" > var div = document.getelementsbytagname ("div"); for (var i = 0; i < div.length; i++) { Div[i].addeventlistener (false);//False for the bubbling event stream, true for capturing the event stream } function showcolor () { alert (this. id); } </script>Click on the innermost green block
When the usecapture parameter of AddEventListener (event, function, Usecapture) is false, the Green Yellow Blue Red is popped in turn.
When the usecapture parameter of AddEventListener (event, function, Usecapture) is true, Red Blue Yellow Green is popped in turn.
JavaScript Advanced Tutorial Event flow in JavaScript-event bubbling and event capture
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
