由于不同的浏览器,或者同一个浏览器有不同的的版本问题,相同的代码在不同的浏览器运行会产生不同的效果甚至是错误。所以需要一些兼容代码来保证程序正常运行。
兼容代码1:为同一个元素注册多个事件
用传统的 对象.事件 的方式来注册多个点击事件时,后一个事件会被前一个事件覆盖。
function f1(){
console.log("绑定了第一个");
}
function f2(){
console.log("绑定了第二个");
}
//绑定的兼容代码
function addEventListener(element,type,fName){
if(element.addEventListener){
element.addEventListener(type,fName,false);
}else if(element.attachEvent){
element.attachEvent(type,fName);
}else{
element["on"+type] = fName;
}
}
addEventListener(document.getElementById("btn"),"click",f1);
addEventListener(document.getElementById("btn"),"click",f2);
两个函数的区别:函数名字和参数的个数就不写了
① addEventListener在谷歌、火狐、IE11支持,attachEvent在IE8支持,在谷歌、火狐、IE11不支持。
② addEventListener中的this是调用他的对象,attachEvent中的this是window对象(页面中的顶级对象)
兼容代码2:为同一个元素注册解绑事件
function removeEventListener(element,type,fName){
if(element.removeEventListener){
element.removeEventListener(type,fName,false);
}else if(element.detachListener){
element.detachLsitener(type,fName);
}else{
element["on"+type] = null;
}
}
//解绑第一个
document.getElementById("btn1").onclick = function(){
removeEventListener(document.getElementById("btn"),"click",f1);
}