Event delegation was a thing before jQuery, and is not that hard to implement as a helper function, e.g.

https://jsfiddle.net/jbctqupz/

Can do it in < 629 Bytes

https://github.com/benaadams/delegate-dom.js

Indeed its easy! But damn it gets boring having everyone patch the DOM with things that should be in the standard DOM API already by now.

Is that not simply

    document.getElementById('foo').addEventListener('click', function() { ... });

?

The vanilla equivalent of:

  $(document).on("click", "#foo", function(){...});

is:

  document.addEventListener('click', function (ev) {
    if (ev.target.matches('#foo')) {
    
    }
  });

The advantage is that #foo can come and go (after page load be injected and removed and injected again, but the event listener must be registered just once.

Since the example is an ID (#foo) the advantage is less obvious. Something like a class (.foo) makes it clearer that there could be many, and it could get expensive to attach an event handler to each one --- though I'm guessing it takes hundreds before it becomes a big deal. But again, .foo's can come and go without having to worry about reattaching the event handler.

P. S. My library, https://github.com/combatentropy/listenup.js (31 lines)

Well, it could be. As long as #foo exists on the page at the time that line is executed. If you inject #foo into the page after load then the click event won't work.

The jquery example delegates #foo, so it can be injected in the page after load and the click event will still work.

But there are ways to mimic the behavior as another person has pointed out.