JavaScript学习--8.1

JavaScript学习--8.1(常见的js代码兼容工具总结)

1.取css样式表和非行间样式的属性

function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return window.getComputedStyle(obj,null)[attr];　　//需要选择属性的对象和一个伪元素字符如(:after)
    }
}

注意：该方法取得的元素属性带有单位的,比如height、width是px

2.为了兼容通过class来获取元素

function getByClass(classname){
       var result=[];     //用来存放筛选的元素
       var elements=document.getElementsByTag("*");
       for(var i=0;i<elements.length;i++){
               if(elements[i].className==classname){
                        result.push(elements[i]);
               }
       }
       return result;
}                

注意：获取到的是一个数组形式的,需要选择其中的加上下标就好

3.兼容性获取事件对象

function getEvent(e){
     var oEvent=e||window.event;
     return oEvent;
}

4.添加多事件句柄

function addEvent(element,type,handle){
        if(element.addEventListener){        //DOM2级
            element.addEventListener(type,handler,false);    //执行事件冒泡流
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;    //任何元素支持的写法
        }

}

5.移除多事件句柄

function(element,type,handler){
        if(element.removeEventListener){        //DOM2级
            element.removeEventListener(type,handler,false);    //执行事件冒泡流
        }else if(element.detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type]=null;    //任何元素支持的写法
        }
}

6.返回事件的类型

function getType(e){
     var oEvent=e||window.event;
    return oEvent.type;    //不存在兼容性问题
}

7.返回事件所在的元素

function getE(e){
    var oEvent=e||window.event;
    return oEvent.target||oEvent.srcElement;

}

8.取消事件冒泡

function stop(e){
     var oEvent=e||window.event;
     if(oEvent.stopPropagation){
            oEvent.stopPropagation();
     }else{
            oEvent.cancelBubble=true;  //取消事件冒泡
     }
}

9.取消默认行为

function prevent(e){
      var oEvent=e||window.event;
      if(oEvent.preventDefault){
           oEvent.preventDefault();
      }else{
            oEvent.returnValue=false;  //取消默认事件
      }
}

10.为onload添加多个事件

function addLoadEvent(func){
    var oldLoad=window.onload;
    if(typeof(window.onload)!="function"){
        window.onload=func;
    }else{
        window.onload=function(){
            oldLoad();
            func();
        }
    }
}