search

Home  >  Q&A  >  body text

Definition and explanation of DOM event delegation

<p>Can someone please explain event delegation in JavaScript and what it does? </p>
P粉754477325P粉754477325450 days ago427

reply all(1)I'll reply

  • P粉593649715

    P粉5936497152023-08-23 00:01:17

    DOM event delegation is a mechanism for responding to UI events through a single common parent element rather than each child element, achieved through the magic of event "bubbles" (also known as event propagation).

    When an event is triggered on an element, the following happens :

    Event bubbling provides the basis for event delegation in browsers. Now you can bind an event handler to a single parent element, and whenever an event occurs on any of its child nodes, the handler will be executed (along with their children). This is event delegation. Here is a practical example of it: 

    <ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

    In this example, if you click on any of the child <li> nodes, you will see a "click!" warning even without Click handler binding on <li>. If we bind onclick="..." to each <li>, you will get the same effect.

    So what are the benefits?

    Suppose you now need to dynamically add new <li> items to the above list through DOM operations: 

    var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

    If you do not use event delegation, you will have to rebind the "onclick" event handler to the new <li> element so that it is consistent with its siblings Performance is the same. With event delegation, you don't need to do anything. Just add the new <li> to the list and you're done.

    This is great for web applications that have event handlers bound to many elements, where new elements are dynamically created and/or removed from the DOM. With event delegation, the number of event bindings can be greatly reduced, moving them to a common parent element, and the code that dynamically creates elements can be decoupled from the logic of the event handlers that bind them.

    Another benefit of event delegation is that the total memory footprint used by event listeners is reduced (because the number of event bindings is reduced). For small pages that are frequently unloaded (i.e. users frequently navigate to different pages), this may not have much of an impact. But for long-lived applications it can be important. There are some very hard to track cases where when elements are removed from the DOM they still occupy memory (i.e. they leak), and often this leaked memory is related to event bindings. Using event delegation, you can freely destroy child elements without having to worry about forgetting to "unbind" their event listeners (since the listeners are on ancestor elements). These types of memory leaks can be contained (if not eliminated entirely, which is sometimes really hard to do. IE, I'm looking at you).

    Here are some specific code examples of better event delegation:

    reply
    0
  • Cancelreply