Event Bubbling and Event Capturing
Event bubbling and Event Capturing is very interesting topic in javascript. Most developers use events on a single element then they don’t face any problem but when we use events on nested elements then we face some problems like clicking on child element it executes child and parent events also, that problem is called event bubbling and event capturing.
Let’s see in detail what is event bubbling and event capturing:
What is Event Bubbling?
In Event Bubbling first event occurs where we click then on its parent and ancestors, which means it goes from bottom to top. It executes the innermost code first and then the uppermost or parent code.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div onclick="alert('maindiv')"> main div
<div onclick="alert('child')"> child
<div onclick="alert('subchild')">subchild</div>
</div>
</div>
</body>
</html>
In this example when we click on sub child first runs onclick:
- on subchild
- then on child
- then on maindiv
- and so on upwards till the document object
So if we click on subchild element we will see 3 alerts.
This process is called event bubbling because the event bubbles from the innermost element and upward to the last parent element.
How to Resolve an Event Bubbling Problem?
We can get rid of the event bubbling problem, javascript introduces a method called an event.stopPropagation().
Let’s see how we can use the event.stopPropogation:
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div onclick="alert('maindiv')"> main div
<div id="child" onclick="event.stopPropagation()"> child
<div id="subchild" onclick="event.stopPropagation()">subchild</div>
</div>
</div>
<script>
var subchild = document.getElementById("subchild");
var child = document.getElementById("child");
subchild.addEventListener('click',function()
{
alert('subchild');
})
child.addEventListener('click',function()
{
alert('child');
})
</script>
</body>
</html>
In this example we have used event.stopPropogation() on child and sub-child elements to stop bubbling.
What is an Event Capturing?
Event Capturing is the opposite of Event Bubbling, In Event Capturing events occur on the parent element first then on its child element. It goes from top to bottom.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main"> main div
<div id="child"> child
<div id="subchild">subchild</div>
</div>
</div>
<script>
var main = document.getElementById("main");
var subchild = document.getElementById("subchild");
var child = document.getElementById("child");
main.addEventListener('click',function()
{
alert('main');
},true)
subchild.addEventListener('click',function()
{
alert('subchild');
})
child.addEventListener('click',function()
{
alert('child');
})
</script>
</body>
</html>
In this example when we click on any child element, it executes the first main parent element then clicked element, and then child element.
How to Resolve an Event Capturing Problem?
To get rid of the Event Capturing problem, there are the following steps:
1. Remove true form addEventListener like this in your code
main.addEventListener('click',function()
{
alert('main');
})
2. use stopPropogation on child and subchild element
<div id="child" onclick="event.stopPropagation()"> child
<div id="subchild" onclick="event.stopPropagation()">subchild</div>
</div>
Complete code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main"> main div
<div id="child" onclick="event.stopPropagation()"> child
<div id="subchild" onclick="event.stopPropagation()">subchild</div>
</div>
</div>
<script>
var main = document.getElementById("main");
var subchild = document.getElementById("subchild");
var child = document.getElementById("child");
main.addEventListener('click',function()
{
alert('main');
})
subchild.addEventListener('click',function()
{
alert('subchild');
})
child.addEventListener('click',function()
{
alert('child');
})
</script>
</body>
</html>
Categories: web designing javascript front end developer
