CODEWITHSUNDEEP
jquery
Miro J.
Miro J.

Reputation: 4954

Use one common event handler vs. separate

We have an element with 10 sub-elements. Each of them has to handle the click event. The 10 sub-elements stop the propagation of the click to the parent. At this point we started adding instances of the same parent element and have to attach the event handler in real-time.

I wonder if it is better to have only one click event - the one of the parent, and check which sub-element was clicked. There will be 10 if statements in the handler, which call different functions. We feel this is a more efficient way for the browser to attach events.

What is the best practice?

Upvotes: 2

Views: 600

Answers (3)

Ohgodwhy
Ohgodwhy

Reputation: 50787

IMO --

$('parent').on('click', 'child', function(e){
    e.stopPropagation();
    doWork($(this));    
});

And a function to handle this.

function doWork(ele){
    //ele is already a jQuery object, don't wrap again, it's cached
    switch(ele.prop('someUniqueIdentifier')){
        case 'whatever':
            //do your stuff, make more cases
            break;
    }
}

Upvotes: 2

jfriend00
jfriend00

Reputation: 707318

If all your click handlers have completely separate code with nothing in common, then you're just comparing letting the system dispatch the events vs. you dispatching the events. Usually, it's easier and more performant to let the system dispatch them unless you have dynamic elements in which case you may want to use the advantages of delegated event handling so you don't have to attach a new event handler every time you create a new sub-element.

But, if your click handlers have significant common code or each of your event handlers can be factored into common code and non-common code, then it may be more efficient to have one click handler that executes the common code in one place and then branch for the more specific code.

If, in your one master click handler, you end up implementing a giant switch statement or giant if/else statements with one branch for each node, then you've probably gone the wrong way. I'd only use the one master click handler if the code was mostly common and there was a very efficient way to branch (without the giant switch or if/else block) or if I needed the advantages of delegated event handling for dynamic elements.

To summarize, go with the single master click handler if:

  1. You need the advantages of delegated event handling to deal with dynamic elements.
  2. All the click handlers are the same or can be factored into the same code using this and .data() references.
  3. The click handlers are mostly the same and any separate code can be efficiently branched without a giant switch statement or giant if/else tree.

If none of those are the case (e.g. the click handlers are generally all separate and the elements are not dynamic), then just let the system dispatch to different click handlers and factor common code into common functions that you can call from each separate event handler to avoid repeating any code in each event handler.

Upvotes: 2

Hauke P.
Hauke P.

Reputation: 2823

I'd create a function that creates an object that maps each sub-element's class (assuming you assign a class to each sub-element that is unique inside of a single parent element) to a function and loop through that array to attach the functions to the click events. Something like this:

function createEventHandlers(yourarguments) {
   return {
     'subelement1': function(e) { alert("1 was clicked with arguments" + yourarguments); },
     'subelement2': function(e) { alert("2 was clicked with arguments" + yourarguments); },
     //...
   };
}

function setSubElementClickHandlers(element, arguments) {
   var eventHandlers = createEventHandlers(arguments);
   for(cls in eventHandlers) {
       $(element).children('.' + cls).click(eventHandlers[cls]);
   }
}

Upvotes: 1

Related Questions