title: jQuery on() selector
body: <p>What is the purpose of the <code>selector</code> in the jQuery <code>on()</code> method?</p>
  <p>In what situation is</p>
  <pre><code>$(&quot;#fish&quot;).on(&quot;click&quot;, &quot;.button&quot;, function() {
      // something
  });
  </code></pre>
  <p>better than, say,</p>
  <pre><code>$(&quot;#fish&quot;).find(&quot;.button&quot;).on(&quot;click&quot;, function() {
      // something
  });
  </code></pre>
  <p>?</p>
  <p>I've looked on the <a href="http://api.jquery.com/on/" rel="noreferrer">jQuery documention</a> and found:</p>
  <blockquote>
  <p>If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.</p>
  <p>When a selector is provided, the event handler is referred to as delegated. 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>Am I correct in saying that the difference is that in my first example, the event is bound to the <code>#fish</code>, but only listens for events bubbling up from the <code>.buttons</code>, whereas in the second example the event is bound to each of the <code>.buttons</code>? If so what are the implications of this? :S</p>
  <p>So if the event is bound to the #fish, when you click a .button, is there anyway to know which .button was clicked on? this will refer to the #fish rather than the .button, correct?</p>