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.