Event Delegation

Event delegation is a powerful and efficient pattern for handling events in the DOM. Instead of attaching a separate event listener to every single child element in a container, you attach a single event listener to their common parent container. This pattern leverages 'event bubbling', the process where an event fired on a child element 'bubbles up' through its ancestors in the DOM tree. When the event reaches the parent container, the listener is triggered. Inside the listener function, you can use the `event.target` property to identify the actual child element that was the original source of the event. You can then check if `event.target` is an element you care about (e.g., by checking its tag name, class, or ID) and execute your logic accordingly. This approach has two main benefits. First, it's more memory efficient, as you only need one event listener instead of potentially hundreds. Second, it simplifies handling dynamically added elements. If you add new child elements to the container after the page has loaded, the event delegation pattern will automatically work for them without you needing to attach new listeners, because they are inside the container that is already being listened to.