bubble_capture.js

//Bubbling
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, false);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, false);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, false);


//Capture
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, true);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, true);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, true);

//Mix and match
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, true); //capture
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, false); // buble
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, true);//capture

/*
out put : when you click on child
grandParentClicked
childClicked
ParentClicked
*/

document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, true); //capture
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, false); // buble
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, false);//bubble

/*
out put : when you click on child
grandParentClicked
childClicked
ParentClicked
*/

document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, false);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, true);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, true);

/*
ParentClicked
childClicked
grandParentClicked
*/


//Stop Propogation capture mode
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
    event.stopImmediatePropagation();
}, true);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, true);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, true);

// now only grandParentClickedPrinted



//Stop Propogation capture mode
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, true);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, true);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
        event.stopImmediatePropagation();
}, true);

// Now all theree console are printed




// Stop propogation in bubble phase
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, false);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
    event.stopImmediatePropagation();
}, false);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
}, false);

/*
Out put 
childClicked
ParentClicked
*/

// Stop propogation in bubble phase
document.querySelector ("#grnadParent").addEventListener ('click', (event) => {
    console.log ('grandParentClicked');
}, false);
document.querySelector ("#parent").addEventListener ('click', (event) => {
    console.log ('ParentClicked');
}, false);
document.querySelector ("#child").addEventListener ('click', (event) => {
    console.log ('childClicked');
    event.stopImmediatePropagation();
}, false);

/*
Out put 
childClicked
*/

bubbleCap.html

<div id="grnadParent">
    <div id="parent">
        <div id="child"></div>
    </div>
</div>