Event bubbling and event capture for JS

JS Bubbles the event by default and begins capturing all of the listener objects for that event from the root element. We can specify whether the event executes in the bubbling or capturing phase by binding the event.

Obj.addeventlistener (Event,function () {},bool);
Bool:false, represents the bubbling phase execution
Bool:true, representing capture phase execution

Example:

<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

For example, there are UL events and Li events, click on the event capture after Li

From top to bottom to trigger events, first trigger the UL event, and then trigger Li incident

document.getElementById ("ParentID"). AddEventListener ("click", Function (e) {
    alert (' Trigger parent Event ');
}, true;

Event Bubbling

bottom-up to trigger the event, triggering the Li event, and then triggering the UL event to prevent the event bubbling

The method of the consortium is e.stoppropagation (), ie is using e.cancelbubble = true;

<script type= "Text/javascript" >  
    var obj1=document.getelementbyid (' Id1 ');   
    Obj1.addeventlistener (' click ', Function (e) {curclick (' id1 '); Stoppropagation (e)},false);  

    var Obj2=document.getelementbyid (' Id2 ');  
    Obj2.addeventlistener (' click ', Function (e) {curclick (' id2 '); Stoppropagation (e)},true);  

    var Obj3=document.getelementbyid (' id3 ');  
    Obj3.addeventlistener (' click ', Function (e) {curclick (' id3 '); Stoppropagation (e)},true);  

    function Curclick (ID) {  
        alert (ID);  
    }  

    function  Stoppropagation (e) {  
        var e = window.event | | event;    
        if (e.stoppropagation) {//w3c block bubbling Method    
            e.stoppropagation ();    
        } else {    
            e.cancelbubble = true;//ie Block bubbling method    
        }   
    }      
</script>  

When clicked ID3: Execution Result: Id2
When clicked Id2: Execution Result: Id2
When clicked Id1: Execution Result: ID1
By This example, the event bubbling was prevented and the event continued to be captured from the subordinate.