title: Direct vs. Delegated - jQuery .on()
body: <p>I am trying to understand this particular difference between the <em>direct</em> and <em>delegated</em> event handlers using the <a href="http://api.jquery.com/on/" rel="noreferrer">jQuery <em>.on()</em> method</a>. Specifically, the last sentence in this paragraph:</p>
  
  <blockquote>
    <p>When a <code>selector</code> is provided, the event handler is referred to as <em>delegated</em>. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.</p>
  </blockquote>
  
  <p>What does it mean by "runs the handler for any elements"? I made a <a href="http://labs.siku-siku.com/jquery/on/" rel="noreferrer">test page</a> to experiment with the concept. But both following constructs lead to the same behavior:</p>
  
  <pre><code>$("div#target span.green").on("click", function() {
     alert($(this).attr("class") + " is clicked");
  });
  </code></pre>
  
  <p>or,</p>
  
  <pre><code>$("div#target").on("click", "span.green", function() {
     alert($(this).attr("class") + " is clicked");
  });
  </code></pre>
  
  <p>Maybe someone could refer to a different example to clarify this point? Thanks.</p>