Event Bubbling and delegation is a very common topic asked in JavaScript interviews but before knowing what they are we first need to have a basic concept about events in JavaScript.
When we say events we usually mean HTML events and what we mean by that, is some change occurred in one of the HTML elements present on the page. Some e.g. are
- An HTML input field was changed
- An HTML button was clicked
and often times when such an event occurs the developers want to perform specific actions in response to that event like for e.g
- Check the value inside the input element is valid or not
- Toggle a modal
and such. So to accomplish these things we developers use EventListeners , these event listeners helps us to execute a callback function in response to an event. e.g.
document.getElementById("btn").addEventListener("click", sayHello);
function sayHello() { // Callback function
console.log("Hello");
}
So great, now we have the power to response to events
BUT
there is this one problem with event listeners they consume memory. So if you go crazy with them it's gonna affect the performance of the site.
So to solve the problem we can use Event Delegation and Event Bubbling.
Suppose you have your HTML code kinda like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Bubbling</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
And now you want to perform some action when a "box" is clicked, in the above code there are 30 box divs so instead on attaching eventListeners to all 30 what we can do is delegate those events
by attaching a single event listener on the parent div "grid".
const grid = document.addEventListener(".grid");
grid.addEventListener("click", (eventObj) => {
console.log(eventObj)
});
BUT we wanted to target the box right ?? So what to do now.
The answer is (drum rolls) event object "eventObj" , the callback function for an event Listener passes an event object which has several methods and properties which are very handy and can help us accomplish our task.
And this is it . Simple, right ?
So if you guys find the post helpful like and share and if I made a mistake somewhere please let me know.
Top comments (0)