JavaScript

Delegate Event Listener

by @admin

9h ago

Apr 28, 2026

Public

Attaches a single event listener to a parent element and handles events from matching descendant elements via event delegation. More efficient than attaching listeners to many individual elements, and works for elements added dynamically to the DOM after the listener is registered.

JavaScript

function delegate(parent, eventType, selector, handler) {
  parent.addEventListener(eventType, (event) => {
    const target = event.target.closest(selector);
    if (target && parent.contains(target)) {
      handler.call(target, event);
    }
  });
}

// Usage
const list = document.querySelector('#item-list');

delegate(list, 'click', '.delete-btn', function (e) {
  e.preventDefault();
  this.closest('li').remove();
});

delegate(list, 'click', 'a.item-link', function (e) {
  console.log('Item clicked:', this.dataset.id);
});

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.

Get Started Free Sign In