How to use delegated events, namespaces, and attaching multiple event handlers

Question

Jsfiddle jsfiddle

I would like to use this concept of event delegation for each event with diversity by name. Appernetly is more optimized than .big-ul li . Unfortunately, I can’t find the correct syntax to make it work when using namespaces or while connecting multiple event handlers with a simple object?

 $(".big-ul").on({ "click.namespace", "li": function(event){ $(this).toggleClass("active"); }, "mouseenter.namespace" , "li": function(event){ $(this).addClass("inside"); }, "mouseleave.namespace", "li": function(event){ $(this).removeClass("inside"); } }); 

jquery event delegation example

 $("#dataTable tbody").on("click", "tr", function(event){ alert($(this).text()); }); 

Answer 1

You cannot attach multiple events to multiple functions. What you can do is use the each function for an object containing all the necessary information. You can even save your namespace name (ha ha) in a separate variable:

JsFiddle example

 var $root = $(".big-ul"); var namespace = 'namespace'; var events = [ { event: "click"+"."+namespace, delegate: "li", fn: function(event){ $(this).toggleClass("active"); } }, { event: "mouseenter"+"."+namespace, delegate: "li", fn: function(event){ $(this).addClass("inside"); } }, { event: "mouseleave"+"."+namespace, delegate: "li", fn: function(event){ $(this).removeClass("inside"); } } ] for(i=0;i<events.length;i++){ $root.on(events[i].event, events[i].delegate, events[i].fn); } 

Advantage compared to the decision:

• This is a much more flexible solution because you can send events -Object through modules or dynamically bind events with one single function, when you always use the same event -Object structure.
• You can delegate one root object to different child nodes, and not just one.

An example :

 /* events array*/ var events = [ { root: "root-query-string", event: "eventname", delegate: "delegate-query-string", fn: function } ] /* dynamic batch bind function */ function batchBind(events) { for(i=0; i<events.length; i++){ $(el.root).on(events[i].event, events[i].delegate, events[i].fn); } } 

Answer 2

how about something like that?

 $(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){ var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace; if(eventMatch == "click.namespace"){ $(this).toggleClass("active"); } if(eventMatch == "mouseenter.namespace"){ $(this).addClass("inside"); } if(eventMatch == "mouseleave.namespace"){ $(this).removeClass("inside"); } }); 

does not work?

EDIT you could also replace mutiple if statements with a switch statement if you would prefer ... this will probably also give better performance (if that bothers you).

 $(".big-ul").on("click.namespace mouseenter.namespace mouseleave.namespace", "li", function(event){ var eventMatch = event.handleObj.origType + "." + event.handleObj.namespace; switch(eventMatch){ case "click.namespace": $(this).toggleClass("active"); break; case "mouseenter.namespace": $(this).addClass("inside"); break; case "mouseleave.namespace": $(this).removeClass("inside"); break; } }); 

EDIT2 is updated, so jsfiddle will work based on what @ Nirazzul said. JsFiddle example

Answer 3

each answer will not be more efficient than using the .big-ul li selector. My theory is that the basic on () selector is triggered once with the selector and immediately connects the event, and the on () delayed with the selector triggers the selector every time events occur (to find the corresponding elements).

You can also do it this way and save it simply:

 $(".big-ul li").on({ "click.namespace": function (event) { $(this).toggleClass("active"); }, "mouseenter.namespace": function (event) { $(this).addClass("inside"); }, "mouseleave.namespace": function (event) { $(this).removeClass("inside"); } }); 

http://jsfiddle.net/AzQBR/1/

I'm glad that the delayed by () speed cancels me compared to the not delayed on () calls if someone can run performance statistics.

Answer 4

Repeating all the answers (including my original one), I would recommend just connecting each event separately using the on() pending syntax:

 var $bigul = $(".big-ul"); $bigul.on("click.namespace", "li", function (event) { $(this).toggleClass("active"); }); $bigul.on("mouseenter.namespace", "li", function (event) { $(this).addClass("inside"); }); $bigul.on("mouseleave.namespace", "li", function (event) { $(this).removeClass("inside"); }); 

All other solutions overly complicate the code. This is about the way you can get it.

JSFiddle http://jsfiddle.net/AzQBR/2/

Answer 5

This is the guys! But you wrote it wrong! Try the following:

 $(document).ready(function(){ $(document).on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } },'p'); 

});