Event bubbling or event capture

Transferred from: http://www.runoob.com/js/js-htmldom-eventlistener.html

Event passing defines the order in which element events are triggered. If you insert the <p> element into the <div> element and the user taps the <p> element, which element's "click" event is first triggered?

In bubbling , an inner element's event is triggered first, and then an external element is triggered, that is: The <p> element's Click event is triggered first, and then the <div> element's Click event is triggered.

In a capture , an event of an external element is first triggered before the event of the inner element is triggered, that is: The <div> element's Click event is triggered first, and then the <p> element's Click event is triggered.

The AddEventListener () method can specify the "usecapture" parameter to set the delivery type:

function, usecapture);

The default is False, which is the bubbling pass, when the value is true, and the event uses capture delivery.

Example:

<! DOCTYPE html>Div {background-color:coral;    BORDER:1PX solid; padding:50px;}The </style>document.getElementById ("MyP"). AddEventListener ("click",function() {alert ("You clicked on the P element!");}, false);d Ocument.getelementbyid ("Mydiv"). AddEventListener ("click",function() {alert ("You clicked on the DIV element!");}, false);d Ocument.getelementbyid ("MyP2"). AddEventListener ("click",function() {alert ("You clicked on the P2 element!");}, true);d Ocument.getelementbyid ("MyDiv2"). AddEventListener ("click",function() {alert ("You clicked on the DIV2 element!");}, true);</script></body>
Event bubbling or event capture