Event delegation

Event delegation in jQuery is a technique where instead of attaching an event handler directly to an element, you attach it to a parent element that exists in the DOM at the time your code is initially executed. This parent element then listens for events bubbling up from child elements, and it can handle those events on behalf of its children.

Here's how event delegation works in jQuery:

1. Attach Event to Parent Element: You attach an event handler to a parent element using jQuery's .on() method. This method allows you to specify both the event type (like 'click', 'change', etc.) and a selector for child elements that should trigger the event handler.

   $('#parentElement').on('click', '.childElement', function() {
       // Event handler code
   });
   

   In this example:

   • #parentElement is the parent element.
   • .childElement is a selector for child elements within #parentElement.
   • The function is the event handler that runs when .childElement is clicked.

2. Event Bubbling: When an event (e.g., a click) occurs on a child element that matches the selector (.childElement), the event bubbles up through the DOM hierarchy. jQuery captures this event at the #parentElement level because the event bubbles up to it.

3. Event Handling: jQuery then checks if the original element that triggered the event matches the selector (.childElement) specified in the .on() method. If it matches, the event handler function is executed.

Advantages of Event Delegation:

• Dynamic Elements: Works well with dynamically added child elements because the parent element is always present in the DOM.
• Performance: Fewer event handlers attached directly to individual elements can improve performance, especially on large pages with many elements.
• Simplifies Code: Helps keep your code cleaner and more maintainable, especially when dealing with nested structures or complex UI interactions.

Example Use Case:

Imagine you have a list (<ul>) where list items (<li>) are dynamically added or removed. Instead of attaching event handlers to each <li> directly, you attach one event handler to the <ul> parent:

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

$('#myList').on('click', 'li', function() {
    alert($(this).text());
});

In this example, clicking on any <li> inside #myList will trigger the alert, displaying the text of the clicked <li>. This approach ensures that even if you add or remove <li> elements dynamically, the event handling remains consistent without needing to reattach handlers.