Event Capturing And Bubbling In JavaScript

Introduction

The DOM has two approaches for an object to sense events: the first one is top-down approach and the second is the bottom-up approach. The top-down approach is called event capture whereas the 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 the 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 an event listener to document, div, p, and input. Also, create functions for each listener. By doing this, you will have the 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>

The addEventListener() function has two mandatory parameters, “event” and “function” and one optional parameter, “useCapture”. userCapture has two possible values “true” and “false”. If “true” is set, then the event handler will execute in the capturing phase.

So, as written in the code, if we click on button, the output will be as below.

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

Event Bubbling

Event bubbling is a bottom-up approach, so the sequence of calling events is as below.

In this case, click event of the button will be called first and the document at last in sequence. To achieve this, we are using the same example as event capturing. The 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 “userCapture” parameter in addEventListener(). This will allow you to change the event calling flow in bottom-up approach.

Output for the above code will be as follows.