摘要：考察到的點(diǎn)主要在事件對(duì)象等。而且，事件對(duì)象在標(biāo)準(zhǔn)和瀏覽器中也有不同。事件對(duì)象兼容事件對(duì)象屬性的不同上面的代碼中就判斷了瀏覽器支持的情況，從而去適配標(biāo)準(zhǔn)瀏覽器和瀏覽器。基本到這里也就完成了事件的綁定和解綁的方法。

面試中常會(huì)問(wèn)到的一個(gè)問(wèn)題，事件委托，我覺(jué)得除了能夠看你對(duì)dom2事件的了解程度外，對(duì)瀏覽器的兼容也是有一定考察的。

考察到的點(diǎn)主要在addEventListener(),attachEvent(),事件對(duì)象等。
常見(jiàn)的考察方式是問(wèn)你如何在一個(gè)列表中，點(diǎn)擊某個(gè)li，就彈出被點(diǎn)擊li的索引，或者讓你實(shí)現(xiàn)類(lèi)似JQuery的on和off這兩個(gè)方法。

簡(jiǎn)單來(lái)做，就可以給所有的li添加dom0級(jí)的事件，每個(gè)li都綁定一個(gè)onclick事件：

window.onload = function(){
    //dom0級(jí)的方式，直接為每個(gè)li綁定事件
    var ul = document.getElementById("ul");
    var lis = ul.querySelectorAll("li");
    for(var i = 0;i < lis.length;i++){
        (function(j){
            lis[j].onclick = function(e){
                alert(j+1);
            }
        })(i);
    }
}

這種方式很簡(jiǎn)單，但缺點(diǎn)也很明顯，其實(shí)可以利用事件冒泡，把事件綁定在li的父級(jí)ul上，在點(diǎn)擊之后，就會(huì)被ul的事件處理程序捕獲到，從而處理。
這里要注意的就是兼容問(wèn)題了，addEventListener并不被IE9以下的瀏覽器支持，與之對(duì)應(yīng)的是attachEvent方法。而且，事件對(duì)象在標(biāo)準(zhǔn)和IE瀏覽器中也有不同。

window.onload = function(){
    var ul = document.getElementById("ul");
    if(ul.addEventListener){
        ul.addEventListener("click",handler);
    }else if(ul.attachEvent){
        ul.attachEvent("onclick",handler);
    }

    function handler(e){
        var ul = document.getElementById("ul");
        var e = e || window.event;                //事件對(duì)象兼容
        var liList = ul.getElementsByTagName("li");
        for(var i = 0;i
上面的代碼中就判斷了瀏覽器支持的情況，從而去適配標(biāo)準(zhǔn)瀏覽器和IE瀏覽器。
如果是然你實(shí)現(xiàn)類(lèi)似JQuery的on方法和off方法，可以參考下面啊的代碼，這里統(tǒng)一參考js高程中的寫(xiě)法，定義一個(gè)EventUtil對(duì)象，來(lái)放這些方法。
var EventUtil = {
    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.detachEvent){
            element.detachEvent("on" + type, handler);
        }else{
            element["on" + type] = null;
        }
    }
}

基本到這里也就完成了事件的綁定和解綁的方法。不過(guò)上面也說(shuō)到了，這里其實(shí)最主要的也在兼容性的處理上，就不得不提一下事件對(duì)象了，dom和IE中的事件對(duì)象還是有很大不同的。
常用的幾個(gè)如preventDefault(),stopPropagation(),target等,IE下均有不同的表示。見(jiàn)下


功能
標(biāo)準(zhǔn)瀏覽器相關(guān)屬性
IE相關(guān)屬性


事件的目標(biāo)
target
srcElement


取消事件默認(rèn)行為
preventDefault()
returnValue


取消事件冒泡
stopPropagation()
cancelBubble


剩下的就是利用這幾個(gè)屬性，擴(kuò)展一下EventUtil對(duì)象，來(lái)做兼容了。
var EventUtil = {
    getEvent : function(event){
        return event ? event : window.event;
    },
    getTarget : function(event){
        return event.target || event.srcElement;
    },
    preventDefault : function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    stopPropagation : function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
}