@Leviakc
Posted
Hello there 👋 well done! it's a great solution, I see you used a for loop for add an addEventListener to each button but I think it might be better to use Event delegation
Using event delegation instead of adding an addEventListener to each child element in JavaScript can offer several benefits:
-
Performance: Event delegation improves performance by reducing the number of event handlers in the document, leading to better performance, especially with a large number of elements or dynamically generated content.
-
Code simplicity: Event delegation allows you to write a single event listener for the parent element instead of duplicating code for each child element, resulting in cleaner and more concise code.
-
Dynamic content handling: Event delegation ensures that the event listener remains in place for both existing and future elements, making it easier to handle dynamically added or removed elements.
-
Reduced memory usage: With event delegation, only one function needs to be stored in memory, reducing the memory footprint compared to attaching multiple event handlers.
-
Handling events on non-existent elements: Event delegation can handle events on elements that are not present in the DOM at the time the event listener is attached, making it useful for asynchronously loaded content or elements that may be added later.
Overall, event delegation provides better performance, simpler code, dynamic content handling, reduced memory usage, and the ability to handle events on non-existent elements.
Event Delegation in JavaScript –Explained with an Example
I hope these resources help you improve that part, really like your code, until the next time 👋
Marked as helpful
