JavaScript Advanced Tutorial Event flow in JavaScript-event bubbling and event capture

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.