常用js兼容封装

虽然现在的js库很多也很完善，例如jq，喝多人用的得心应手，但是如果一个页面本来没有多少内容，就没有必要引入一个庞大的js库。

而且原生js的效率也比较高点，原因是js库里面考虑了各种情况，做了很多对你来说没有必要的判断，肯定会有些影响的。

这里提供一些常用的兼容js 总结

1.事件封装

var eventUtil = {
    //addEvent
    addEventHandle:function(element,eventType,fn){
        if(element.addEventListener){//非IE
            element.addEventListener(eventType,fn,false);
        }else if(element.attachEvent){//IE
            element.attachEvent('on'+eventType,fn);
        }else{
            element['on'+eventType] = fn;//这里使用[]方式实现对象的属性添加，相当于.的作用
        }
    },
    //removeEvent
    removeEventHandle:function(element,eventType,fn){
        if(element.removeEventListener){
            element.removeEventListener(eventType,fn,false);
        }else if(element.detachEvent){//IE,带'on'
            element.detachEvent('on'+eventType,fn);
        }else{
            element['on'+eventType] = fn;
        }

    },
    //getEvent
    getEvent:function(event){
       return event?event:window.event;
    },
    //getEventType
    getType:function(event){
        return event.type;
    },
    //getTargetElement
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    //preventDefault
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();//非IE
        }else{
            event.returnValue = false;//针对IE
        }

    },
    //stopPropagation
    stopPropagation:function(event){
        if(event.stopPrapagation){
            event.stopPropagation();//非IE
        }else{
            event.cancelBubble = true;//针对IE
        }
    }
}

 2.ajax封装

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
    function ajax(opt) {
        var opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        //ie
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        //post类型是表单数据提交
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        //get是查询字符串提交
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);
            }else{

                opt.fail(xmlHttp.responseText);

            }
        };
    }

 3.获取外链样式

function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}