event-delegation.js

/**
 * @description Efficient event delegation pattern to handle dynamic child elements.
 * @tags dom, events, performance, delegation
 */
export function delegate(parent, selector, eventType, handler) {
  const container = typeof parent === "string" ? document.querySelector(parent) : parent;
  if (!container) return () => {};

  const listener = function (event) {
    const target = event.target.closest(selector);
    if (target && container.contains(target)) {
      handler.call(target, event, target);
    }
  };

  container.addEventListener(eventType, listener);

  return function cleanup() {
    container.removeEventListener(eventType, listener);
  };
}