How to multiple event handles and pass data in jquery
<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>
