Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Phases of JavaScript Event

  • Difficulty Level : Hard
  • Last Updated : 21 Jul, 2020

There are three different phases during lifecycle of an JavaScript event.

  • Capturing Phase
  • Target Phase
  • Bubbling Phase

They follow the same order as listed above.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Capturing Phase is when event goes down to the element. Target phase is when event reach the element and Bubbling phase is when the event bubbles up from the element.



So among the three phases of an event, which phase uses the addEventListener() and how the programmer can change it?

html




<!DOCTYPE html>
<html>
  
<body>
    <div class="container">
        <button id="btn">Click Me!</button>
    </div>
      
    <script type="text/javascript">
        document.getElementById('btn')
            .addEventListener('click', 
            function () {
                alert('Button Clicked!');
            })
    </script>
</body>
  
</html>


Output:

The addEventListener() method will be called during the Bubbling phase. The code shown above will use addEventListener() with two arguments. However, in the above code, .addEventListener() can be called with the third argument as “true” which will invoke the listener earlier during the capturing phase.

Example:

html




<DOCTYPE html>
    <html>
  
    <body id="bdy">
        <div id="container">
            <button id="btn">Click Me!</button>
        </div>
        <script type="text/javascript">
            document.getElementById('bdy')
                .addEventListener('click', function () {
                alert('Body!');
            })
            document.getElementById('container')
                .addEventListener('click', function () {
                alert('Div!');
            }, true)
            document.getElementById('btn')
                .addEventListener('click', function () {
                alert('Button!');
            })
        </script>
    </body>
  
    </html>


Output:


In the above code, the body and button are in the bubbling phase (default) while div is set to capturing phase. When a button is clicked it starts at the top again. When it comes to the body element, it does not run function because we are still in the capturing phase. But when it reaches div it runs the function because the third parameter of addEventListener() is “true”. So it has to run in the capturing phase. When it reaches the button it switches from the capturing phase to the target phase and lastly to the bubbling phase. It fires the addEventListener which is in default mode.

So the above code will give alert msg box showing “div”, then “button” and lastly “body”.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!