I see, I missed the "<target element>" part of the call. Well, why not just attach the event listener to that, then? `querySelector` / `querySelectorAll` can be called on any old element, not just document.

    <root-element>
      .querySelector(<target element>)
      .addEventListener('click', function(event){
        // event.currentTarget refers to 
        // <target element> no matter which of its
        // children were clicked
      });

Admittedly, this doesn't work as well for multiple target elements. I use a forEach polyfill which could loop through them, but that could create a lot of event listeners when possibly you'd only need one higher up. Depends how many there are, I suppose.

The problem with attaching the listener to the 'actual' target is that it goes wrong when your markup is dynamic and so the target element is not (always) there the moment you create the listener.

This is why one of the early lessons you learn as a jQuery user is to use $().on() instead of something like $().click();

Plus, while I don't suppose it's a real performance issue much of the time, adding an event listener to each of, say, a few hundred items in a list is probably rather inefficient compared to adding it to the root element of the list.