JS event bubbling and capturing

Last Update:2016-07-13 Source: Internet

Author: User

Tags event listener

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1 Event propagation--bubbling and capturing
By default, events use the bubbling event stream and do not use the capture event stream. However, in Firefox and Safari, you can explicitly specify the use of the capture event stream by passing in the Usecapture parameter when registering an event and setting this parameter to True.2 Bubbling Event stream
When an event is triggered on a DOM element, such as when a user clicks on the client's name node, the event will bubble through the entire DOM node hierarchy as the parent node inherits from the node, until it encounters a node attached to the event type processor, which is the OnClick event at this time. The bubbling of events can be terminated at any time during the bubbling process, which can be done by invoking the Stoppropagation () method on the event object on the Internet Explorer can be set by setting the event object's Cancelbubble property to True. If you do not stop the propagation of an event, the event continues to bubble through the DOM until it reaches the document root.3 Capturing event streams
The processing of the event begins at the root of the DOM hierarchy, not from the target element that triggers the event, and the event is passed down from all ancestor elements of the target element. In this process, events are captured from the document root to the elements of each inheritance derivation between the event target elements, and if the event listener is registered with the Usecapture property set to True, then they can be assigned to any element of the period to handle the event; The event is then passed to the next element on the path of the derived element until the target element. When the event reaches the target element, it then bubbles through the DOM node.

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "Utf-8">    <title>Bubble Event</title>    <styletype= "Text/css">Body{margin:0;}#one{width:500px;Height:300px;background:RGB (255,0,0);        }#two{width:400px;Height:260px;background:RGB (255,50,50);        }#three{width:300px;Height:240px;background:RGB (255,100,100);        }#four{width:200px;Height:200px;background:RGB (255,150,150);        }    </style></Head><Body>    <DivID= ' One '>      <DivID= ' Both '>        <DivID= ' three '>          <DivID= ' Four '>          </Div>        </Div>      </Div>    </Div>         <Script>        var One=document.getElementById (' One'); var Both=document.getElementById (' Both'); varthree=document.getElementById ('three'); var Four=document.getElementById (' Four'); varusecapture= true; //false for bubbling get "target element first triggered" true for capture get "parent element triggered first"One.addeventlistener ('Click', function() {Console.log (' One');        }, Usecapture); Two.addeventlistener ('Click', function() {Console.log (' Both');        }, Usecapture); Three.addeventlistener ('Click', function() {Console.log ('three');        }, Usecapture); Four.addeventlistener ('Click', function() {Console.log (' Four');                }, Usecapture); /*false Bubble click Four div output: Four three, one true capture Click on the four div output: One of three four*/    </Script></Body></HTML>

Analysis:

AddEventListener third parameter usecapture, True when capturing, false when bubbling

Bubbling starts from the target object, passes to the parent element to the window, and captures the pass from the bottom of the window to the target object!

JS event bubbling and capturing

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More