js 添加事件 attachEvent 和 addEventListener

我们在给组件添加事件的时候一般可以这样

 <input type="button" value="submit" onclick="method()" /> 

这种方法简单高效，但如果对同一个元素添加同一个事件的时候，会造成前面的方法失效，只运行最后一个

obj.onclick = method1;
obj.onclick = method2;
obj.onclick = method3;

最终 只会执行method3()方法，在IE11（不包括11）以下我们可以用 element.attachEvent(type, function)方法，值得注意的是，type事件类型 需要加上 "on"，例如点击事件，type="onclick",

obj.attachEvent("onclick",method1);
obj.attachEvent("onclick",method2);
obj.attachEvent("onclick",method3);

在执行时为倒序执行，method3 -> method2 -> method1, 可惜这是IE的专属方法，其他浏览器大部分都支持 W3C标准的 element.addEventListener(type,function,useCapture) 方法，type 类型这里不用加 "on" 例如

obj.addEventListener("click", method1, false);
obj.addEventListener("click", method2, false);
obj.addEventListener("click", method3, false);

执行顺序为 正序，即 method1 -> method2 -> method3

为了兼容性问题，前人重写了通用的注册事件的方法

function addEvent(elm, eType, fn, useCapture){
    if(elm.addEventListener){
        elm.addEventListener(eType, fn, useCapture);
        return true;
    }else if(elm.attachEvent){
        var r = elm.attachEvent("on"+eType, fn);
        return r;
    }else{
        elm['on'+eType] = fn;
    }
}

其他博客流传的 Dean Edwards 的版本，功能强大，我就不贴出来了，贴一个H5版本

var addEvent = (function(){  
    if(document.addEventListener){  
        return function(el,type,fn){  
            if(el.length){  
                for(var i=0;i<el.length;i++){  
                    addEvent(el[i],type,fn);  
                }  
            }else{  
                el.addEventListener(type,fn,false);  
            }  
        };  
    }else{  
        return function(el,type,fn){  
            if(el.length){  
                for(var i=0;i<el.length;i++){  
                    addEvent(el[i],type,fn);  
                }  
            }else{  
                el.attachEvent("on"+type,function(){  
                    return fn.call(el,window.event);  
                });  
            }  
        };  
    }  
})();