jQuery Event Binding to single handler

Question

I came across a situation where having single handler helps simplify the project. Does this have any impact on performance? Especially when the mouse move event called, having too many conditions have any impact on performance?

var myHandler = function(e){
    if (e.type == 'mousemove'){

    } else if (e.type == 'mouseover'){

    } else if (e.type == 'mouseout'){

    } else if (e.type == 'mousedown'){

    } else if (e.type == 'mouseup'){

    }        
};

$('#Element').bind('mouseover mouseout mousedown mouseup mousemove', myHandler);

score 0 · Answer 1 · edited May 23 '17 at 10:29

One more note regarding performance (plus code readability), switch is significantly faster than else ifs.

var myHandler = function(e){
    switch(e.type){
        case 'mousemove':

            break;
        case 'mouseover':

            break;
        case 'mouseout':

            break;
        case 'mousedown':

            break;
        case 'mouseup':

            break;
    }
};

For more detials you can tajke a look at Performance of if-else, switch or map based conditioning

Pencho Ilchev · Accepted Answer · 2011-12-29T05:40:44.500

If you do need to handle all those events and you order the if-else statements by the frequency that the events are fired (as you already have) there is insignificant performance penalty, i.e. at most 4 short string comparisons. The following code tries to benchmark the performance of 10,000,000 string comparisons of fixed size:

$(function (){
Function.prototype.benchmark = function(name, times, args){

var iteration;
var start = new Date();
for (iteration=0; iteration<times; iteration++) {
        var result = this.apply(this, args);
}

var end = new Date();

alert(name + " : " + (end-start));
}
 function test(args){
     return args[0] == "thisistest";
 }
function overhead(args){
 }
test.benchmark("string comparison", 10000000,["thisistesT"]);
//run same without the string comparison
overhead.benchmark("overhead", 10000000,["thisistesT"]);
});

Since the browser is not the only application on my PC the results vary between the executions, however, I very rarely got results of under 100ms in Chrome (remember that this is for 10,000,000 iterations).

Anyway, while your performance will not suffer from binding multiple events to a single function I really doubt that this will simplify your project. Having many if-else statements is usually considered a bad practice and a design flaw.

If you do this so that you can share state between the handlers by having them under the common scope of a function, you are better off having something like:

$(function (){
  var elementSelector = "#Element";
  var i = 0; //shared
  var events = {
    mouseover : function(){alert("mouseOver " + elementSelector + i++);},
    mouseout : function(){alert("mouseOut " + elementSelector  + i++);}
    // define the rest of the event handlers...
  };

  var $target = $(elementSelector);
  for(var k in events){
     $target.bind(k, events[k]);
  }
});

jQuery Event Binding to single handler

2 Answers2