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
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
3 comments
Good one..