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)