title: How to multiple event handles and pass data in jQuery
body: <p>I want to attach multiple events to a single element. But I want to attach different data to each event. The way to attach multiple events in jQuery is as follows:</p>
  
  <pre><code> $("div.test").on({
       click: this.clickEventCalled,
       mouseenter: this.mouseEnterEventCalled
       mouseleave: this.mouseLeaveEventCalled
   });
  </code></pre>
  
  <p>But I want to be able to do something like this:</p>
  
  <pre><code> $("div.test").on("click", { name: "Karl" }, clickEventCalled);
  </code></pre>
  
  <p>And I was wondering if there was a more elegant way of doing this than:</p>
  
  <pre><code> var self = this;
   $("div.test").on({
       click: function(event){
           self.clickEventCalled(event,{name:"Karl"})
       },
       mouseenter: function(event){
           self.mouseEnterEventCalled(event,{name:"Ben"})
       },
       mouseleave: function(event){
           self.mouseLeaveEventCalled(event,{name:"Ken"})
       }
   });
  </code></pre>