title: Emulate jQuery "on" with selector in pure Javascript
body: <p>I would emulate in pure Javascript the main functionality of jQuery <a href="http://api.jquery.com/on/" rel="nofollow noreferrer"><code>.on( events , selector  , data)</code></a>  method.</p>
  <p>For example</p>
  <pre><code>$(document).on('click','.button',function() {
     console.log(&quot;jquery onclick&quot;); 
  });
  </code></pre>
  <p>I thought it was enough make something like this</p>
  <pre><code>document.addEventListener('click',function(e) {
      if(e.target.className == 'button2') {
           console.log(&quot;It works&quot;);   
      }
  });
  </code></pre>
  <p>However when I have this html structure:</p>
  <pre><code>&lt;button class=&quot;button2&quot;&gt;Hello &lt;span&gt;World&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  <p>my script doesn't works when the click event is triggered on <code>span</code> element, because <code>e.target</code> is <code>span</code>. (I ignore for this question the complexity of elements with multiple class, and crossbrowsers compatibility)</p>
  <p>The <a href="https://github.com/jquery/jquery/blob/master/src/event.js#L708" rel="nofollow noreferrer">source of jQuery</a> is not simple to read and I don't understand how it works (because the first piece of code, in jQuery, works with my html structure).</p>
  <p>I need this method because my html is dynamic, and buttons with this class are created, deleted and re-created many times. I don't want add listeners every times.</p>
  <p>I would avoid, if possible, to include jquery library.</p>
  <p>So, I can do this?</p>
  <p>Here the <a href="http://jsfiddle.net/wT4qu/" rel="nofollow noreferrer">jsFiddle</a> for testing.</p>