跨浏览器的js方法包装

log方法： 

function log(message){
    if(typeof console == "object"){
        console.log(message);
    } else if (typeof opera == "object"){
        opera.postError(message);
    } else if(typeof java == "object" && typeof java.lang == "object"){
        java.lang.System.out.println(message);
    }
}

添加事件和移除事件的兼容处理（其中attachEvent的handler中的this是指window，且执行顺序是添加顺序的逆序）

addHandler:function(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false)
    } else if(element.attachEvent){
        element.attachEvent("on"+type,handler)
    } else{
        element["on"+type] = handler
    }
}

removeHandler:function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler,false)
    } else if(element.removeEvent){
        element.removeEvent("on"+type,handler)
    } else{
        element["on"+type] = null
}
    

先检测的是DOM2级方法、然后是IE的方法、最后一种是DOM0级方法

eg: addHandler(btn,"click",handler)

 

IE中事件对象分为

btn.onclick = function(){event = window.event}

btn.attachEvent("onclick",function(event){event})，同时也可以使用window.event

<input type="button",οnclick="alert(event.type)" />

IE中的returnValue属性相当于preventDefault方法()：设置returnValue = false即可

跨浏览器的事件对象：

getEvent: function(event){
    return event? event:window.event
}

getTarget: function(event){
    return event.target || event.srcElement
}

perventDefault: function(event){
    if(event.preventDefault){
        event.preventDefault()
    } else{
        event.returnValue = false
    }
}

stopPropogation: function(event){
    if(event.stopPropogation){
        event.stopPropogation()
    }else {
        event.cancelBubble = true
    }
}

DOM2级事件规定的HTML事件支持判断：

var isSupported = document.implementation.hasFeature("HTMLEvents","2.0")

DOM3级事件支持判断：

var isSupported = document.implementation.hasFeature("UIEvent","3.0")

 

焦点事件：

document.hasFocus()、document.activeElement

blur/DomFocusIn/DomFocusOut/focus/focusin/focusout

当焦点从页面中的一个元素移动到另一个元素上，触发顺序为:6 5 1 3 4 2

其中 1 3 6的事件目标是失去焦点的元素，2 4 5的事件目标是获得焦点的元素

相关元素：mouseover 和mouseout事件会涉及更多元素（相关元素就是失去/获得光标的元素）

getRelatedTarget: function(event){
    if(event.relatedTarget){
        return event.relatedTarget
    } else if(event.toElement){
        return event.toElement
    } else if(event.fromElement){
        return event.fromElement
    } else{
       return null
    }
}

 

鼠标滚动事件：mousewheel -> wheelDelta （opera9.5之前该值正号为向下，负号为向上）

                            DOMMouseScroll ->detail（FireFox对应，且值为3的倍数）

 

键盘事件的支持主要遵循DOM0级

 

获取按键的ASCII编码

getCharCode: function(event){
    if(typeof event.charCode == "number")
        return event.charCode
    } else{
        return event.keyCode
    }
}

 

只有按住字符键时会触发textInput事件，IE9+、Safari、Chrome支持，只有IE支持inputMethod属性

DOM2级的变动事件能在DOM中的某一部分发生变化时给出提示。DOMSubtreeModified等

hashchange事件里包括oldURL和newURL，保存着参数列表变化前后的完整URL。

检测浏览器是否支持required属性

var isRequiredSupported = "required" in document.createElement("input")

HTML5为文本字段新增了pattern属性，这个属性的值是一个正则表达式，eg: "\d+"

 

实现表单序列化的代码：

function serialize(form){
    var parts = [],//保存创建的字符串的各个部分
        field = null,i,len,j,optLen,option,optValue
    for(i =0;len=form.elements.length;i<len;i++){
        field = form.elements[i]
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if(field.name.length){
                    for(j=0,optLen = field.options.length;j<optLen;j++){
                        option = field.options[j]
                        if(option.selected){
                            optValue = ""
                            if(option.hasAttribute){
                                optValue = (option.hasAttribute("value")?option.value :option.text)
                            } else{
                                optValue = (option.attribute["value"].specified?option.value:option.text)
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue))
                        }
                    }
                }
                break
            case undefined: //字段集
            case "file":    //文件输入
            case "submit":
            case "reset":
            case "button":
                break
            case "radio":
            case "checkbox":
                if(!field.checked){
                    break
                }
                //执行默认操作
            default:     //不包含没有名字的表单字段
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value))
                }
        }
    }
    return parts.joins("&")
}

跨浏览器的CORS

即使浏览器对CORS的支持程度并不都一样，但所有浏览器都支持简单的（非Preflight和不带凭据的）请求，因此有必要实现一个跨浏览器的方案，检测XHR是否支持CORS的最简单方式，就是检测是否存在withCredentials属性，再结合XDomainRequest对象是否存在，就可以兼顾所有浏览器了

function createCORSRequest(method,url){
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr){
        xhr.open(method,url,true)
    } else if(typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest()
        xhr.open(method,url)
    } else {
        xhr = null
    }
    return xhr
}