What are the differences between event propagation and delegation?

What are the differences between event propagation and delegation?

Event propagation refers to the way events travel through the DOM, either bubbling up or capturing down. Delegation, on the other hand, is a technique where a single event listener is added to a parent element to manage events for multiple child elements.

Can you explain bubbling and capturing in more detail?

Sure! Bubbling is when an event starts from the target element and bubbles up to the root, while capturing is the opposite; it starts from the root and goes down to the target.

Why is event delegation useful?

Event delegation is useful because it reduces memory usage and improves performance by minimizing the number of event listeners needed, especially for dynamic elements.

Can you give an example of event delegation in action?

Absolutely! For instance, if you have a list of items, instead of adding a click event to each item, you can add one click event to the parent <ul> element and handle clicks on the child <li> elements.