JS兼容性方法小结 FED社区（转载）

#JS兼容性方法

##事件

• 事件对象兼容

    ie/chrome :event是一个内置全局对象标准下:事件对象是通过事件函数的第一个参数传入兼容写法:   ev = ev||event;

• 取消事件冒泡兼容

    IE8:    cancelBubble =true;非IE:    ev.stopPropagation();

• 阻止默认事件

    IE8:在事件方法尾部returnfalse;//注意该方法还会阻止冒泡非IE:    ev.preventDefault();

• 事件监听兼容

  function bindEvent(obj,event,callback){if(obj.addEventListener){//标准下
            obj.addEventListener(event,callback,false);}else{//非标准下
            obj.attachEvent('on'+event,function(){    
                callback.call(obj);});}}

##DOM

• children属性

  元素.children :只读属性子节点列表集合标准下：只包含元素类型的节点非标准下：只包含元素类型的节点,ie7以下不会包含非法嵌套子节点

• parent节点读取方法

  元素.parentNode :只读属性当前节点的父级节点兼容性很好元素.offsetParent :只读属性离当前元素最近的一个有定位属性的父节点该属性判断父级的几个点：如果没有定位父级，默认是body
    ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
    ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上Layout是ie7以下特性是否有Layout特性：    
    doucument.getElementById('').currentStyle.hasLayout;//true:有 false:没有    alert(document.getElementById('div2').currentStyle.hasLayout );

• 判断所选元素到body的距离：

  function getPos(obj){var pos={left:0,top:0};while(obj){
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
            obj=obj.offsetParent;}return pos;}

• 滚动条距离

  //滚动条滚动距离
    document.documentElement.scrollTop //非chrome
    document.body.scrollTop //chrome//兼容性方案var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

• 获取行间样式

  function getStyle(obj,name){if(obj.currentStyle){//IEreturn obj.currentStyle[name];}else{//标准return getComputedStyle(obj,false)[name];}}

##AJAX

```
    function ajax(method, url, data, successFn){

        url = (method === 'get') && data ? url+'?'+data : url;
        new xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xhr.open(method,url,true);

        if( method === 'get' ){
            xhr.send();
        }else{
            xhr.setRequestHeader('content-type','application/x-www-form-urlencode');
            xhr.send(data);
        }

        xhr.onreadystatechange = function(){
            if( xhr.readyState == 4){
                if(xhr.status === 200){
                    successFn&&successFn(xhr.responseText);
                }else{
                    alert( '出错了，Err:' + xhr.status + '错误');
                }
            }
        }

    }