摘要：從開始已經(jīng)支持事件捕獲了。刪除通過級(jí)方法指定的事件處理程序，只要將事件處理程序的屬性值設(shè)置為即可。如果是，則可以使用這個(gè)方法取消事件的進(jìn)一步捕獲或冒泡，同時(shí)阻止任何事件處理程序被調(diào)用取消事件的進(jìn)一步捕獲或冒泡。

從IE9開始已經(jīng)支持事件捕獲了。
刪除通過DOM0級(jí)方法指定的事件處理程序，只要將事件處理程序的屬性值設(shè)置為null即可。
btn.onclick=null;

attachEvent的事件名稱是onclick，而addEventListener的事件名稱是click

        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert(this.id);
        }        
        btn.addEventListener("click", function (e) {
            alert("我是來測試chrome的");
        }, false);
        btn.attachEvent("onclick", function (e) {
            alert("我是來測試ie的");
        });

上述代碼在ie9下居然三個(gè)alert都彈出來了，也就是說其實(shí)從ie9開始已經(jīng)走的事件捕獲模式了，趨向于dom標(biāo)準(zhǔn)，但是又沒有完全廢棄自己原先的一套規(guī)則，所以兩種事件監(jiān)聽它都支持。

        var btn = document.getElementById("btn");     
        btn.attachEvent("onclick", function (e) {
            alert("1");
        });
        btn.attachEvent("onclick", function (e) {
            alert("2");
        });

上述代碼在ie8及以下瀏覽器，彈出alert框的順序?yàn)?,1,但在ie9下彈出alert框的順序?yàn)?,2

        var btn = document.getElementById("btn"); 
        btn.addEventListener("click",function(e){
            alert(1);
        });
        btn.addEventListener("click",function(e){
            alert(2);
        });

事實(shí)上DOM2級(jí)標(biāo)準(zhǔn)就是按照添加事件的順序注冊(cè)的，也就是說在firefox、chrome等瀏覽器下，彈出alert框的順序是1,2
在ie下，事件處理程序是在全局作用域下運(yùn)行的，所以事件處理程序中的this其實(shí)就是window（基于上面的經(jīng)驗(yàn)，ie9開始趨向于DOM標(biāo)準(zhǔn)，我又特意做了測試，結(jié)果alert的也是true,我有點(diǎn)暈）

        var btn = document.getElementById("btn"); 
        btn.attachEvent("onclick", function (e) {
            alert(this===window);   //true
        });

在chrome等瀏覽器下，this指向的是當(dāng)前對(duì)象

        var btn = document.getElementById("btn"); 
       
        btn.addEventListener("click",function(e){
            alert(this===btn);    //true        
        });     

在dom0級(jí)別的事件綁定中，ie8及以下瀏覽器中e輸出的為undefined,而chrome下的e輸出的對(duì)象跟dom2級(jí)別中的e完全一樣

        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//此處在ie8及以下輸出的是undefined而在ie9下輸出的是object MouseEvent
        }
        btn.attachEvent("onclick", function (e) {
            console.log(e);//在ie7下輸出的是object，在ie8及以下輸出的是object Event，而在ie9下輸出的是object MSEventObj
        });

        var btn = document.getElementById("btn");
        btn.onclick = function (e) {
            console.log(e);//在chrome下，此處的e和下面的e輸出的都是MouseEvent
        }        
        btn.addEventListener("click", function (e) {
            console.log(e);
        });

看一下chome下輸出的e是啥吧

說說這里面有哪些重要的屬性/方法吧
bubbles-->Boolean-->事件是否冒泡

cancelable-->Boolean-->是否可以取消事件的默認(rèn)行為

currentTarget-->Boolean-->事件處理程序當(dāng)前正在處理事件的那個(gè)元素

defaultPrevented-->Boolean-->為true 表示已經(jīng)調(diào)用了preventDefault()

detail-->Integer-->與事件相關(guān)的細(xì)節(jié)信息

eventPhase-->Integer-->調(diào)用事件處理程序的階段：1表示捕獲階段，2表示“處于目標(biāo)”，3表示冒泡階段

preventDefault()-->Function-->取消事件的默認(rèn)行為。如果cancelable是true，則可以使用這個(gè)方法

stopImmediatePropagation()-->Function-->取消事件的進(jìn)一步捕獲或冒泡，同時(shí)阻止任何事件處理程序被調(diào)用

stopPropagation()-->Function-->取消事件的進(jìn)一步捕獲或冒泡。如果bubbles為true，則可以使用這個(gè)方法

target-->Element-->事件的目標(biāo)

type-->String-->被觸發(fā)的事件的類型

其實(shí)我自己也沒有搞清楚stopImmediatePropagation和stopPropagation的區(qū)別，太多方法

需要理解currentTarget和target的區(qū)別及聯(lián)系，在事件處理程序內(nèi)部，this始終等于currentTarget值，即currentTarget是指當(dāng)前被觸發(fā)或者說正在處理事件的那個(gè)元素，而target是指當(dāng)前的目標(biāo)元素；看看代碼具體解釋一下：`

    var btn = document.getElementById("btn");
    btn.onclick = function (e) {
        console.log(e.currentTarget == this); // true
        console.log(e.target == this);  // true
    }`
    

對(duì)btn按鈕觸發(fā)點(diǎn)擊事件，那么e.currentTraget指向了this，e.target也指向了this
而如果是對(duì)body綁定事件處理程序，那么e.currentTarget就指向了document.body了，那么e.target 指向與 btn那個(gè)元素

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

由于ie下事件處理程序的作用域是在全局使用域下，所以它的event對(duì)象也是通過window.event來
一般最簡化的跨瀏覽器的事件通用js如下：

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;
        }
    },
    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;
        }
    },
    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;
        }
    },
    getWheelDelta: function(event) {
        if(event.wheelDelta) {
            return event.wheelDelta;
        }else {
            return -event.detail * 40
        }
    },
    getCharCode: function(event) {
        if(typeof event.charCode == "number") {
            return event.charCode;
        }else {
            return event.keyCode;
        }
    }
};

哪些事件不能冒泡：在我知曉的范圍內(nèi)有focus、blur、unload、load、mouseEnter、mouseLeave