Skip to content
JavaScript

Event Delegation

Implement event delegation via event bubbling.

By EZ4Code Team
eventDOMperformance

Code

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

// Usage
delegate(document.body, ".btn", "click", e => {
  console.log("clicked:", e.currentTarget);
});

Explanation

Matches target elements via closest, reducing the number of event bindings.

More JavaScript Snippets