AI solution for JavaScript Coding Question on BFE.dev
117. event delegation

Here's one possible implementation:

function onClick(root, predicate, handler) {  root.addEventListener('click', function(event) {    let el = event.target;    while (el && el !== root) {      if (predicate(el)) {        handler.call(el, event);      }      el = el.parentNode;    }  });    const stopPropagation = function(event) {    event.stopPropagation();  };    const stopImmediatePropagation = function(event) {    event.stopImmediatePropagation();  };    return {    off: function() {      root.removeEventListener('click', handler);    },    stopPropagation: stopPropagation,    stopImmediatePropagation: stopImmediatePropagation,    stop: stopImmediatePropagation  };}

Here's how it works:

• We attach a single click event listener to the root element.
• Inside the handler, we check if the clicked element (event.target) matches the predicate. If it does, we call the handler function with that element as the "this" context.
• We then traverse up the DOM tree, testing each ancestor of the clicked element, until we hit the root element.
• This allows us to use event delegation to handle clicks on multiple elements with a single event listener.
• We return an object with two properties (stopPropagation and stopImmediatePropagation) which are functions that can be used to stop the propagation of events. We also include a "stop" function for convenience, which is an alias for stopImmediatePropagation.
• Finally, we include an "off" function which can be used to remove the event listener if needed.