1、事件繫結

相容寫法

function add(obj,event){
    if (obj.addEventListener) {
        obj.addEventListener(event,fn,fase);
    }else{
        obj.attachEvent("on"+event,fn);
    }
}

小結：addEventListener()相容firefox、chrome、Safari、opera、IE9+

         attachEvent()相容IE7、8

2、event事件物件

相容寫法

document.onclick = function(e){
     var e = e||window.event;  
     console.log(e.clientX);
}
 

小結：e相容火狐瀏覽器，window.event相容非火狐瀏覽器。

3、獲取scrollTop

相容寫法：

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

小結：document.documentElement.scrollTop相容非chrome

        document.body.scrollTop相容chrome

4、阻止瀏覽器預設事件

相容寫法：

function prevent(event){
    if (event.preventDefault) {
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}
 

小結：eventPreventDefault()不相容IE6-8

             event.returnValue=false相容IE

5、阻止冒泡

相容寫法：

function stop(event){
    if (event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancleBubble = true;
    }
}

小結：event.stopPropagation()不相容IE6-8

            event.cancelBubble=true相容IE

6、滾輪

相容寫法：

function mouseWheel(obj,fn){
    var ff = window.navigator.userAgent.indexOf('Firefox');
    if (ff!=-1) {  
　　　　　　obj.addEventListener('DOMMouseScroll',wheel,false);//相容火狐
    }else{
        obj.onmousewheel = wheel;//非火狐
    }
}

小結：obj.addEventListener('DOMMouseScroll',wheel,false)相容火狐

          obj.onmousewheel=wheel非火狐

7、獲取classname

相容寫法

function byClass(parent,className){
    //通過className查詢元素的相容問題
    //如果現代瀏覽器有這個寫法
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(className);//返回直接查詢到的元素集
    }else{
        //IE瀏覽器
        var arr = [];//用於儲存最終查詢到的元素
        var els = parent.getElementsByTagName('*');//獲取查詢範圍下的所有元素
        var reg = new RegExp('\\b'+className+'\\b','g');
        for (var i=0;i<els.length;i++) {
            if (reg.test(els[i].className)) {//判斷els.className與reg是否匹配，若匹配返回true
                arr.push(els[i]);
　　　　　　　　　　　 reg.lastIndex = 0;　　　　　　　　　　　　　　　　　
            }
        }
        return arr;//返回查詢到的元素
    }
}

補充，對於為何要加上reg.lastIndex = 0;(13行下面那一句程式碼)，原因如下：

若不加這句程式碼，有連續的兩個類名匹配時，只會匹配第一個，則第二個不會。究起原因就是RegExp物件的lastIndex屬性：該屬性存放一個整數，它宣告的是上一次匹配文字之後的第一個字元的位置。若使用了‘g’全域性修飾符，在執行了test方法後，lastIndex就會將匹配到的字串的位置記錄下來作為下一次匹配的起始位置。若是下一次匹配沒有成功，則lastIndex置為0。

若不加'g'全域性修飾符，則可以把這句程式碼省略掉。請點選檢視demo

小結：IE瀏覽器不支援getElementsByClassName()所以只能自己寫一個方法來獲取class

後續還會補充，有錯誤指出還請指出。