JavaScript跨浏览器绑定事件函数的优化

为了操作DOM，我们常会在DOM通过addEventListener绑定各种事件和removeEventListener来移除事件，但是对于低版本的IE是不支持，需要采用IE特有的attachEvent来绑定事件和detachEvent来移除，下面是对于事件的封装，以便于不用写更多的代码。

//跨浏览器添加事件
function addHandler(target, eventType, handler) {
　　if(target.addEventListener) { //DOM2 events
　　　　target.addEventListener(eventType, handler, false);
　　} else { //IE
　　　　target.attachEvent("on" + eventType, handler);
　　}
}
 
//跨浏览器移除事件
function removeHanler(target, eventType, handler) {
　　if(target.removeEventListener) { //DOM2 events
　　　　target.removeEventListener(eventType, handler, false);
　　} else { //IE
　　　　target.detachEvent("on", eventType, handler);
　　}
}

以上代码已经实现了绑定事件兼容IE，但是性能来说不是最优的，因为当我们页面打开以后浏览器已经确定了，正常来说不可能出现一会浏览器是IE一会是其他浏览器，然后上面的封装是在每次绑定和移除事件的时候，都需要去判断一下浏览器，比较消耗性能，特别是你绑定大量事件，反复调用的时候，所以下面这样优化了一下。

优化1：

//添加事件
function addHandler(target, eventType, handler) {
　　//检测浏览器类型，并且重写addHanler方法
　　if(target.addEventListener) { //DOM2
　　　　addHandler = function(target, eventType, handler) {
　　　　　　target.addEventListener(eventType, handler, false);
　　　　};
　　} else { //IE
　　　　addHandler = function(target, eventType, handler) {
　　　　　　target.attachEvent("on" + eventType, handler);
　　　　};
　　}
　　//调用新的函数
　　addHandler(target, eventType, handler);
}
 
//移除事件removeHanler
function removeHandler(target, eventType, handler) {
　　//检测浏览器类型，并且重写removeHandler方法
　　if(target.removeEventListener) { //DOM2
　　　　removeHandler = function(target, eventType, handler) {
　　　　　　target.removeEventListener(eventType, handler, false);
　　　　};
　　} else { //IE
　　　　removeHandler = function(target, eventType, handler) {
　　　　　　target.detachEvent("on" + eventType, handler);
　　　　};
　　}
　　//调用新的函数
　　removeHandler(target, eventType, handler);
}

需要注意的是，在两个函数的最后一行，都调用了被重写了的新函数addHandler(target, eventType, handler)和removeHandler(target, eventType, handler)因为我们用新的函数覆盖了旧的函数，必须要在旧的函数里调用新的函数它才会执行一次。

优化2：

//绑定事件
var addHandler = document.body.addEventListener ?
　　　　　　　　　　function(target, eventType, handler) { //DOM2
　　　　　　　　　　　　target.addEventListener(eventType, handler,false);
　　　　　　　　　　} :
　　　　　　　　　　function(target, eventType, handler) { //IE
　　　　　　　　　　　　target.attachEvent("on" + eventType, handler);
　　　　　　　　　　};
//移除事件
var removeHandler = document.body.removeEventListener ?
　　　　　　　　　　　　function(target, eventType, handler) { //DOM2
　　　　　　　　　　　　　　target.removeEventListener(eventType, handler, false);
　　　　　　　　　　　　} :
　　　　　　　　　　　　function(target, eventType, handler) { //IE
　　　　　　　　　　　　　　target.detachEvent("on" + eventType, handler);
　　　　　　　　　　　　}

这里是提前检测浏览器类型，通过三元运算符判断把正确的操作函数赋值给变量，当调用的时候，就可以立刻绑定了。