title: $(document).on() in plain JavaScript?
body: <p>In jQuery there is <a href="http://api.jquery.com/on/" rel="noreferrer">.on()</a> which can be used as:</p>
  
  <pre><code>$(document).on('click', '.foo', function() { /* ... */ });
  </code></pre>
  
  <p>This listens for click events on all DOM elements with the class <code>.foo</code>.
  However, this also listens for any eventual elements added to the DOM later, so it is not equal to:</p>
  
  <pre><code>var elements = document.getElementsByClassName('foo');
  for (var element in elements) {
    element.addEventListener('click', function() { /* ... */ });
  }
  </code></pre>
  
  <p>How do I do this in plain JavaScript? Am I supposed to use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="noreferrer">MutationObserver</a>? If so, then how? If not, then what?</p>