jQuery事件绑定到单个处理程序

我遇到过单个处理程序有助于简化项目的情况。这是否对性能有任何影响？特别是当鼠标移动事件被调用时，条件太多会对性能产生影响？jQuery事件绑定到单个处理程序

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);

来源

2011-12-28 user1106995

如果您确实需要处理所有这些事件，你为了通过频率的if-else语句，该事件被触发（因为你已经有了）有显着的性能损失，即至多4个短串比较。下面的代码试图基准固定大小的10,000,000字符串比较的性能：

$(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"]); 
});

由于浏览器是不是我的电脑上唯一的应用程序的结果执行之间有所不同，但是，我很少有下的结果在Chrome中为100ms（请记住，这是为了10,000,000次迭代）。

无论如何，虽然你的表现不会受到多个事件绑定到单个函数的影响，但我真的怀疑这会简化你的项目。有许多if-else语句通常被认为是不好的做法和设计缺陷。

如果你这样做，这样你可以在一个功能的常见范围让他们共享处理器之间的状态，你最好有类似：

$(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]); 
    } 
});

来源

2011-12-28 05:32:17

还要说明有关业绩（加代码可读性），switch明显快于else ifs。

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

      break; 
     case 'mouseover': 

      break; 
     case 'mouseout': 

      break; 
     case 'mousedown': 

      break; 
     case 'mouseup': 

      break; 
    } 
};

更多detials可以tajke看看Performance of if-else, switch or map based conditioning

来源

2016-06-16 21:43:42 tomalec

jQuery事件绑定到单个处理程序

回答

相关问题