js兼容事件集合

function createXHR(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }
    else{
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    return xhr;
}

function ajax(type,url,callback){
    var index = url.indexOf("?");
    var p = index < 0 ? "" : url.substring(index + 1); //URL中的参数键值对
    url = index < 0 ? url : url.substring(0,index); //URL地址
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        //动态创建
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var obj = eval(xhr.responseText);
                callback(obj);
            }
        }
    }
    if(type.toUpperCase() == "GET"){
        url = url + "?" + p;
        p = null;
    }
    xhr.open(type,url,true);
    if(type.toUpperCase() == "POST"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    xhr.send(p);
}


//简单版封装
// function ajax(m,url,p){
//     var xhr = createXHR();
//     if(m == "GET"){
//         xhr.open(m,url+"?"+p,true)
//         xhr.send(null);
//     }
//     else{
//         xhr.open(m,url,true)
//         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//         xhr.send(p);
//     }
//     //20秒之后触发该事件
//     xhr.onreadystatechange = function(){
//         if(xhr.readyState == 4){
//             if(xhr.status == 200){
                
//             }
//         }
//     }
// }

function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr] == "auto" ? 0 : obj.currentStyle[attr];
    }
    else{
        return window.getComputedStyle(obj,false)[attr] == "auto" ? 0 : window.getComputedStyle(obj,false)[attr];
    }
}

function startMove(obj,attrJSON,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var count = 0;
        var attrJSONCount = 0;
        for(var attrName in attrJSON){
            if(attrName == "opacity"){
                var cur = Math.round(getStyle(obj,"opacity") * 100);
            }
            else{
                var cur = parseInt(getStyle(obj,attrName)); 
            }
            var speed = (attrJSON[attrName] - cur) / 5; 
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
            if(attrName == "opacity"){
                obj.style.opacity = (cur + speed) / 100;
                obj.style.filter = "alpha(opacity:"+(cur + speed)+")";
            }
            else{
                obj.style[attrName] = cur + speed + "px";
            }
            
            if(cur == attrJSON[attrName]){
                count++;
            }
            attrJSONCount++;
        }
        if(count == attrJSONCount){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);
}



阻止事件默认行为
    /*
    兼容写法：
    注意：IE写在下面
     */
    if(event.preventDefault){     
        event.preventDefault();
    }else{
        event.returnValue=false;   //阻止默认行为
    }//event 为事件对象；

    //还可以在事件函数里面直接写 return false;

鼠标滚轮事件
function on(dom,type,fn){                    //封装事件监听写法
        if(dom.attachEvent){//IE的识别方法
            return dom.attachEvent('on'+type,fn)
        }else{
            return dom.addEventListener(type,fn)//标准浏览器的写法
        }
      }

     
      
    on(document,'mousewheel',add)
    on(document,'DOMMouseScroll',add)        //兼容火狐的鼠标滚轮写法

     function add(e){                //滚轮事件对象里面的向上向下写法（也是兼容火狐
        var event = window.event||e;
        var num = event.wheelDelta||event.detail;
        if(num == 120||num == -3){
            alert("向上")
        }else{
            alert("向下")
        }
      }


        
        IE事件监听:
      1.添加时间监听   (事件名中要加on)
        dom.attachEvent("onclick",fn);
        dom.attachEvent("onclick",fn2);
        事件监听也可以追加，只是执行顺序是反序；
        但是如果传统事件声明方式 如 dom.onclick = fn;不管在上还是在下都是先执行传统的事件；
          2.移除事件：
        dom.detachEvent("onclick",fn)


        谷歌和火狐：
    1.添加事件监听
        dom.addEventlistener("click",fn,false)  //默认为false 也就是冒泡
          可以追加事件绑定，不管有没有传统事件声明方式，统一按照从上到下的执行顺序！
    2.移除事件：
        dom.removeEventlistener("click"fn)//移除时后面的函数必须和被移除的函数是相同的！

兼容封装：
    //功能：事件监听器
    dom:事件目标
    type：时间类型(click)
    fn:事件处理程序

    function on(dom,type,fn){
        if(dom.attachEvent){
            dom.attachEvent('on'+type,fn)
                }else{
            dom.addEvevtListener(type,fn)
        }
    }

   on(dom,'click',function(){
    alert("nihao")
})



获取event对象的兼容写法
var ev=e||window.event;
  获取事件目标的兼容写法
var t=ev.target||ev.srcElement;
  取消事件默认动作的兼容写法
/*
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
*/
  滚动条距顶部的距离的兼容写法
document.body.scrollTop||document.documentElement.scrollTop 滚动条距离顶部的距离
锄禾(0022681A2569对话) 09:51:00
  事件监听鼠标滚动的兼容写法
/*
function add(){alert("hi")};
on(document,"DOMMouseScroll",add);
on(document,"mousewheel",add);
*/
function getClientHeight(){
    var result = 0;
    if(window.innerHeight){
        result = window.innerHeight;
    }
    else{
        //检查一下当前浏览器的模式
        //标准模式：CSS1Compat    怪癖模式："BackCompat"
        if(document.compatMode == "CSS1Compat"){
            //标准模式
            result = document.documentElement.clientHeight;
        }
        else{
            result = document.body.clientHeight;
        }
    }
    return result;
}

function getClientWidth(){
    var result = 0;
    if(window.innerWidth){
        result = window.innerWidth;
    }
    else{
        //检查一下当前浏览器的模式
        //标准模式：CSS1Compat    怪癖模式："BackCompat"
        if(document.compatMode == "CSS1Compat"){
            //标准模式
            result = document.documentElement.clientWidth;
        }
        else{
            result = document.body.clientWidth;
        }
    }
    return result;
}


            有两种方法：        

            e = e || window.event;

            // 获取某个dom节点的left,top值
            var left = parseFloat(window.getComputedStyle ? getComputedStyle(dom).left : dom.currentStyle.left);
            var top = parseFloat(window.getComputedStyle ? getComputedStyle(dom).top : dom.currentStyle.top);
                
            //e为事件对象;



            //封装函数获取某个dom节点的属性值
            function getStyle(dom,propertyName){
                if(dom.currentStyle){
                    return dom.currentStyle[propertyName];
                }else{
                    return getComputedStyle(dom,null)[propertyName];
                }
            }

            //var w = window.getComputedStyle(box,null).width;  //标准
            //var h = box.currentStyle["height"];  //IE8及以下的处理方式
            //var w = getStyle(box,"width");



if(event.stopPropagation){
                           event.stopPropagation();  //取消事件冒泡
                        }else{
                            event.cancelBubble = true;  //cancelBubble
                        }

function jsonp(url){
            var script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
        }


             e = e || window.event;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

            //pageX,pageY的兼容写法
            e.pageX = e.pageX || e.clientX + scrollLeft;
            e.pageY = e.pageY || e.clientY + scrollTop;

        //e为事件对象