This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
Event delegation in JavaScript is a technique that allows you to handle events on multiple elements with a single event listener attached to their parent element.
Instead of attaching an event listener to each individual child element, you attach a single event listener to the parent element and use it to listen for events that occur on the child elements.
When an event occurs on a child element, the event bubbles up to the parent element, which can then use the event object to determine which child element triggered the event.
This allows you to handle events on multiple child elements with a single event listener attached to the parent element.
An example
const parentElement = document.querySelector('.parent');
parentElement.addEventListener('click', function(event) {
if (event.target.classList.contains('child')) {
console.log('Clicked on child element');
}
});Explanation
In this example, we have a parent element with a class of “parent” and multiple child elements with a class of “child”.
Instead of attaching an event listener to each child element, we attach a single event listener to the parent element using the addEventListener() method.
In the event listener function, we use the event.target property to determine which child element triggered the event.
We then check if the event.target element has a class of "child" using the classList.contains() method, and if it does, we log a message to the console.
By using event delegation, we can handle events on multiple child elements with a single event listener attached to the parent element.
This approach can lead to cleaner and more efficient code, especially when dealing with a large number of child elements.
Is it a good practice?
Yes, event delegation is generally considered a good practice in JavaScript, especially when you have a large number of child elements that need to handle the same type of event. Here are a few reasons why:
- Reduced memory usage: Attaching multiple event listeners to child elements can use up a lot of memory, which can slow down your application. Event delegation allows you to attach a single event listener to the parent element, which uses less memory.
- Increased performance: Because you’re attaching a single event listener to the parent element, your code will be more performant. This is because the browser doesn’t have to spend time attaching and removing event listeners on each child element.
- Dynamic elements: Event delegation also works well with dynamically generated elements. If you add a new child element to the parent element, it will automatically inherit the event listener, without you having to attach a new event listener to the new element.
- Simplified code: Using event delegation can also make your code simpler and more maintainable. Instead of having to attach event listeners to multiple child elements, you can attach a single event listener to the parent element and handle events on all child elements in a single function.
Overall, event delegation can lead to more efficient and maintainable code, especially when dealing with a large number of child elements.
Conclusion
Whether you’re a beginner or an experienced JavaScript developer, mastering event delegation is an essential skill that can help you build better web applications.
Share the article if you learnt something cool!
Build Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Cleaner Code with Event Delegation in JavaScript was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Mohammad Basit
Mohammad Basit | Sciencx (2023-03-13T07:37:34+00:00) Cleaner Code with Event Delegation in JavaScript. Retrieved from https://www.scien.cx/2023/03/13/cleaner-code-with-event-delegation-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.