兼容总结

获取元素：

// 在低版本ie不兼容

document.getElementsByClassName()

document.querySelector()

document.querySelectorAll()

// 兼容

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

 

获取滚动过的距离

// 有文档声明的时候

document.documentElement.scrollTop

// 在没有文档声明的时候不兼容

document.body.scrollTop

// 兼容写法

var t = document.documentElement.scrollTop || document.body.scrollTop

 

获取样式

// W3C标准浏览器

window.getComputedStyle(元素)

// 在低版本ie

元素.currentStyle

兼容写法

function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele)[attr]
        }else{
            return ele.currentStyle[attr]
        }
    }

绑定事件

// W3C标准浏览器

元素.on类型 = 函数

元素.addEventListener(类型,函数)

// 在低版本ie中

元素.on类名 = 函数

元素.attachEvent(on类型,函数)

兼容写法

 function bindEvent(ele,type,handler){
        if(ele.addEventListener){
            ele.addEventListener(type,handler)
        }else if(ele.attachEvent){
            ele.attachEvent('on'+type,handler)
        }else{
            ele['on'+type] = handler
        }

解绑事件

// W3C标准浏览器

// 用on绑定的，就用on来解绑

元素.on类型 = null

// 用方法绑定的，就用方法来解绑 - 匿名函数无法解绑

元素.removeEventListener(类型,函数)

// 在低版本ie中

// 用on绑定的，就用on来解绑

元素.on类型 = null

// 用方法绑定的，就用方法来解绑 - 匿名函数无法解绑

元素.detachEvent(on类型,函数)

兼容的写法

function removeEvent(ele,type,handler){
        if(ele.removeEventListener){
            ele.removeEventListener(type,handler)
        }else if(ele.detachEvent){
            ele.detachEvent('on'+type,handler)
        }else{
            ele['on'+type] = null
        }
    }

事件对象

// 在W3C标准浏览器中

元素.on类型 = function(e){

// e就是事件对象

}

// 在低版本ie中

元素.on类型 = function(){

var e = window.event;

// e是事件对象

}

// 兼容写法

元素.on类型 = function(e){

var e = e || window.event;

// e是兼容的事件对象

}

阻止事件冒泡

// 在W3C标准浏览器中

事件对象.stopPropagation()

// 在低版本ie中

事件对象.cancelBubble = true

兼容写法

 if(e.stopPropagation){
        e.stopPropagation()
    }else{
        e.cancelBubble = true
    }

 

阻止默认行为

// 在W3C标准浏览器中

事件对象.preventDefault()

// 在低版本ie中

事件对象.returnValue = false

兼容写法

if(e.preventDefault){
        e.preventDefault()
    }else{
        e.returnValue = false
    }

获取键盘码

// 正常

事件对象.keyCode

// 在低版本火狐中

事件对象.which

// 兼容写法

var keycode = 事件对象.keyCode || 事件对象.which

 

获取精准的事件源

// W3C标准浏览器

事件对象.target

// 在低版本ie中

事件对象.srcElement

// 兼容写法

var target = 事件对象.target || 事件对象.srcElement