Event Capturing and Bubbling in JavaScript

The DOM has two approaches for object to sense events: first is top down approach and second is bottom up approach. Top down approach is called event capturing whereas bottom up is known as event bubbling.

Let’s start with example where you have one html which contains <div>, <p> under <div>, and <input> under <p>

By doing this you will have below ready code

<html>
    <head>
    </head>
    <body>
        <div id='divMain'>
            <p id='pMain'>
                <input id='btnClick' type='button' value='Click!'/>
            </p>
        </div>
    </body>
</html>

Event Capturing

To understand what is event capturing add event listener to document, div, p, and input, also create functions for each listener. By doing this you will have below code

<html>
    <head>
    </head>
    <body>
        <div id='divMain'>
            <p id='pMain'>
                <input id='btnClick' type='button' value='Click!'/>
            </p>
        </div>
        <script>
            document.addEventListener('click', documentClick, true);
            document.getElementById('btnClick').addEventListener('click', btnClick, true);
            document.getElementById('pMain').addEventListener('click', pMainClick, true);
            document.getElementById('divMain').addEventListener('click', divMainClick, true);

            function documentClick(){
                console.log('Document clicked');               
            }

            function btnClick(){
                console.log('Button clicked');
            }

            function pMainClick(){
                console.log('Main paragraph clicked');
            }

            function divMainClick(){
                console.log('Main div clicked');
            }
        </script>
    </body>
</html>

addEventListener() function have two mandatory parameters “event” and “function” and one optional parameter “useCapture”.

useCapture has two possible values “true” and “false”. If “true” is set, then the event handler will execute in the capturing phase

So as written code if we click on button then output will be as below

In this case even though we are clicking button, it is calling document first and button at last. As written in introduction Event Capturing is like Top Down approach, that is why it is calling click event of document first and button at last in sequence.

Event Bubbling

Event bubbling is bottom up approach, so sequence of calling event is as below

In this case, click event of button will be called first and document at last in sequence. In addEventListener() function if “false” is set for useCapture parameter, then the event handler will execute in the bubbling phase.

To achieve this, we are using same example as event capturing, and code for it will be as below.

<html>
    <head>
    </head>
    <body>
        <div id='divMain'>
            <p id='pMain'>
                <input id='btnClick' type='button' value='Click!'/>
            </p>
        </div>

        <script>
            document.addEventListener('click', documentClick, false);
            document.getElementById('btnClick').addEventListener('click', btnClick, false);
            document.getElementById('pMain').addEventListener('click', pMainClick, false);
            document.getElementById('divMain').addEventListener('click', divMainClick, false);

            function documentClick(){
                console.log('Document clicked');               
            }

            function btnClick(){
                console.log('Button clicked');
            }

            function pMainClick(){
                console.log('Main paragraph clicked');
            }

            function divMainClick(){
                console.log('Main div clicked');
            }
        </script>
    </body>
</html>

Here we are passing “false” as “useCapture” parameter in addEventListener(), this will allow you change event calling flow in bottom up approach.

Output for above code will be

CLICK HERE to read more articles on JavaScript

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs