title: .hover(...) and on.("hover"...) behaving differently
body: <p>Using JQuery I am trying to chain a couple of functions when an element has a hover state.</p>
  
  <p>I would normally use the <code>.hover</code> event function, but after reading some tutorials I read that using <code>.on</code> is better as you can use one event handler to monitor all bubbling events within a document.</p>
  
  <p>However, I am having problems when I chain two functions together like so:</p>
  
  <pre><code>$("element").on( "hover", function() {         
      console.log("one");     
  }, function() {         
      console.log("two");     
  });
  </code></pre>
  
  <p>I expected the result to be <b>one two</b> <em>(which was the case when using <code>.hover</code>)</em> but instead I get <b>two two</b>.</p>
  
  <p>Can anyone explain what I am doing wrong or whether this is expected behaviour and why?</p>
  
  <p><b>Reproduced using <code>.hover(...)</code>: <a href="http://jsfiddle.net/gXSdG/" rel="noreferrer">http://jsfiddle.net/gXSdG/</a></b></p>
  
  <p><b>Reproduced using <code>.on(hover...)</code>: <a href="http://jsfiddle.net/gXSdG/1/" rel="noreferrer">http://jsfiddle.net/gXSdG/1/</a></b></p>