摘要：作為事件處理程序的函數(shù)一個(gè)布爾值。最后這個(gè)布爾值為表示在捕獲階段調(diào)用事件處理程序，表示在冒泡階段調(diào)用事件處理程序。阻止特定事件的默認(rèn)行為。

通過Javascript指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴?br>每個(gè)元素都有自己的事件處理程序?qū)傩?，這些屬性通常全部小寫，例如onclick。將這種屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序。

var btn = document.getElementById("myBtn");
// 添加事件處理程序
btn.onclick = function () {
    alert( this );//為DOM元素btn
};
// 移除事件處理程序
btn.onclick = null;

優(yōu)點(diǎn):1.簡(jiǎn)單2.具有跨瀏覽器的優(yōu)勢(shì)
缺點(diǎn):在代碼運(yùn)行之前不會(huì)指定事件處理程序，因此這些代碼在頁(yè)面中位于按鈕后面，就有可能在一段時(shí)間怎么點(diǎn)擊都沒反應(yīng)，用戶體驗(yàn)變差。

定義了兩個(gè)方法，用于處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。三個(gè)參數(shù)，1.要處理的事件名。2.作為事件處理程序的函數(shù)3.一個(gè)布爾值。最后這個(gè)布爾值為true,表示在捕獲階段調(diào)用事件處理程序，false表示在冒泡階段調(diào)用事件處理程序。

// 添加多個(gè)事件處理程序
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function (){
    alert( this );// 為DOM元素btn
},false );
btn.addEventListener("click",function () {
    alert("Hello World");
},false);

// 移除事件處理程序
btn.removeEventListener("click",function () {
    // 匿名函數(shù)無(wú)法被移除,移除失敗
},false);
   // 改寫
   var handler = function () {
    alert(this.id);
   };
   btn.addEventListener("click",handler,false);
   // 再次移除事件處理程序
   btn.removeEventListener("click",handler,false);// 移除成功

這兩個(gè)事件處理程序會(huì)按照添加他們的順序觸發(fā)。大多數(shù)情況，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種版本的瀏覽器。

優(yōu)點(diǎn): 一個(gè)元素可以添加多個(gè)事件處理程序
缺點(diǎn): IE8及以下瀏覽器不支持DOM2級(jí)事件處理程序。(包括IE8)

定義了兩個(gè)方法，與上類似:attachEvent(),detachEvent()。這兩個(gè)方法接收相同的兩個(gè)參數(shù):事件處理程序名稱和事件處理程序函數(shù)。由于IE8以及更早版本的瀏覽器只支持事件冒泡，所以通過detachEvent()添加的事件處理程序會(huì)被添加到冒泡階段。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    alert( this );// window
});
btn.attachEvent("onclick", funciton(){
    alert("HELLO, WORLD");
});

點(diǎn)擊按鈕，這兩個(gè)事件處理程序的觸發(fā)順序與上述剛好相反。不是按照添加事件處理程序的順序觸發(fā)，剛好相反。

優(yōu)點(diǎn):一個(gè)元素可以添加多個(gè)事件處理程序
缺點(diǎn):只支持IE。

var EventUtil = {
    addHandler : function ( ele, type, handler ) {
        if ( ele.addEventListener ) {
            ele.addEventListener( type, handler, false );
        } else if ( ele.attachEvent ) {
            ele.attachEvent( "on" + type, handler );
        } else {
            ele["on" + type] = handler
        }
    },
    removeHandler: function ( ele, type, handler ) {
        if ( ele.removeEventListener ) {
            ele.removeEventListener( type, handler, false );
        } else if ( ele.detachEvent ) {
            ele.detachEvent( "on" + type, handler );
        } else {
            ele[ "on" + type ] = null;
        }
    }
}

兼容DOM的瀏覽器會(huì)將一個(gè)event對(duì)象傳入到事件處理程序中。無(wú)論指定事件處理程序時(shí)使用什么方法(DOM0級(jí)或DOM2)級(jí)，都會(huì)傳入event對(duì)象。event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性和方法也不一樣。不過，所有事件都有下表列出的成員

| 屬性/方法 | 類型 | 說明
| ---------—--- | ------------- | ------------
| bubbles
| cancebles
| currentTarget
| defaultPrevented
| detail
| evnetPhase
| preventDefault
| stopImmediatePropagation()
| stopPropagation()
| target
| trusted
| type
| view

1.currentTarget與target

target       :事件的目標(biāo)對(duì)象
currenTarget : 其當(dāng)前事件處理程序正在處理事件的那個(gè)元素

var btn = document.getElementById("myBtn");

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

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

點(diǎn)擊按鈕，結(jié)果如上。

2.preventDefault()與cancelable

cancelable     :只讀屬性，表明是否可以取消事件的默認(rèn)行為,值為true便可以，反之不行。
preventDefault :阻止特定事件的默認(rèn)行為。例如，鏈接的默認(rèn)行為就是在被單擊時(shí)會(huì)導(dǎo)航到其href特性指定的URL。

var link = document.getElementById( "myLink" );
link.onclick = function ( e ) {
    // 阻止默認(rèn)行為
    e.preventDefault();// 只有cancelable設(shè)置為true的事件，才可以使用
}

3.stopPropagation()與eventPhase

stopPropagation() : 取消事件進(jìn)一步捕獲或冒泡，如果bubbles為true，則可以使用這個(gè)方法
eventPhase        : 調(diào)用事件處理程序的階段:1.表示捕獲階段2.表示"處于目標(biāo)階段"3.表示冒泡階段。

var btn = document.getElementById("myBtn");

document.body.addEventListener( "click", function ( e ) {
    alert( e.eventPhase );
}, true );// 1

btn.addEventListener( "click",function ( e ) {
    alert( e.eventPhase );
}, false );// 2

document.body.addEventListener( "click", function ( e ) {
    alert( e.eventPhase );
}, false );// 3

點(diǎn)擊btn按鈕彈出1，2，3。

var btn = document.getElementById("myBtn");

document.body.addEventListener( "click", function ( e ) {
    alert( e.eventPhase );// 1
}, true );

btn.addEventListener( "click",function ( e ) {
    // 阻止進(jìn)一步的事件冒泡
    e.stopPropagation();
    alert( e.eventPhase );// 2
}, false );

document.body.addEventListener( "click", function ( e ) {
    alert( e.eventPhase );// 點(diǎn)擊按鈕時(shí)，事件處理程序被阻止，無(wú)反應(yīng)
}, false );

點(diǎn)擊btn按鈕彈出1，2。

var btn = document.getElementById("myBtn");

document.body.addEventListener( "click", function ( e ) {
    // 阻止進(jìn)一步的事件冒泡
    e.stopPropagation();
    alert( e.eventPhase );// 1
}, true );

btn.addEventListener( "click",function ( e ) {
    alert( e.eventPhase );// 點(diǎn)擊按鈕時(shí)，事件處理程序被阻止，無(wú)反應(yīng)
}, false ); 

document.body.addEventListener( "click", function ( e ) {
    alert( e.eventPhase );// 點(diǎn)擊按鈕時(shí)，事件處理程序被阻止，無(wú)反應(yīng)
}, false );

點(diǎn)擊btn按鈕彈出1。

訪問IE中的event對(duì)象有幾種不同的方式，取決于指定事件處理程序的方法。IE的event對(duì)象同樣也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。與DOM中的event對(duì)象一樣，這些屬性和方法也會(huì)因?yàn)槭录愋偷牟煌煌?但所有事件對(duì)象都會(huì)包含下表所列的屬性和方法。

| 屬性/方法 | 類型 | 說明
| ---------—--- | ------------- | ------------
| cancelBubble
| returnValue
| srcElement
| type

1.srcElement

事件的目標(biāo)(與DOM中的target屬性相同)

var btn = document.getElementById("myBtn");

btn.onclick = function () {
    alert( window.event.srcElement === this )// true
};
btn.attachEvent("onclick", function (e) {
    alert( e.srcElement === this ) // false, IE事件處理程序綁定this的值為window
});

2.returnValue

默認(rèn)值為true，但將其設(shè)置為false就可以取消事件的默認(rèn)行為(與DOM中的preventDefault()作用相同)

var link = document.getElementById( "myLink" );
link.onclick = function () {
    // 阻止默認(rèn)行為
    window.event.returnValue = false;
}

與DOM不同的是，在此沒有辦法確定事件是否能被取消。

3.cancelBubble

默認(rèn)值為false，但將其設(shè)置為true就可以取消事件冒泡(與DOM中的stopPropagation()作用相同)

var btn = document.getElementById("myBtn");

btn.onclick = function () {
    alert( "Clicked" );
    window.event.cancelBubble = true;
};

document.body.onclick = function () {
    alert( "Body Clicked" )
};

要訪問IE中event對(duì)象有幾種不同的方式，取決于指定事件處理程序的方法。在使用DOM0級(jí)方法添加事件處理程序時(shí)，event對(duì)象作為window對(duì)象的一個(gè)屬性存在。使用IE事件處理程序，event對(duì)象可以通過window對(duì)象進(jìn)行訪問，同時(shí)也會(huì)被當(dāng)做參數(shù)傳遞。

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

DOM3級(jí)事件模塊在DOM2級(jí)事件模塊基礎(chǔ)上重新定義了這些事件，也添加了一些新事件。包括IE9在內(nèi)的所有主流瀏覽器都支持DOM2級(jí)事件。IE9也支持DOM3級(jí)事件。

DOMContentLoaded :

可以為document和window添加相應(yīng)的事件處理程序(盡管這個(gè)事件會(huì)冒泡到window，但它的目標(biāo)實(shí)際上是document)。

DOMContentLoaded中的event對(duì)象不會(huì)提供額外的信息(其target屬性是document)
兼容性:IE9+,Fifrefox,Chrome,Safari3.1+,Opera9+。

hashchange :

必須要把hashchange事件處理程添加給window對(duì)象，然后URL參數(shù)列表只要變化就會(huì)調(diào)用它。

此時(shí)的event對(duì)象應(yīng)該額外包含兩個(gè)屬性:oldURL和newURL。這兩個(gè)屬性分別保存著參數(shù)列表變化前后的完整URL。
兼容性:IE8+，firefox3.6+,Safari5+,Chrome,Opera10.6+。在這些瀏覽器中只有Firefox6+,chrome和Opera支持oldURL和newURL屬性。為此，最好是使用location對(duì)象來確定當(dāng)前的參數(shù)列表。

keydown(任意鍵),keypress(字符鍵), keyup

發(fā)生keypress事件意味著按下的鍵會(huì)影響到屏幕中文本的顯示。在所有瀏覽器中，按下能夠插入或者刪除字符的鍵都會(huì)觸發(fā)keypress事件。

所有元素都支持以上三個(gè)事件,但只有在用戶通過文本框輸入文本時(shí)才最常用到

觸發(fā)順序:在用戶按下了一個(gè)字符鍵時(shí)，keydown-->keypress-->keyup。在用戶按下的是一個(gè)非字符鍵，keydown-->keyup。

event對(duì)象

shiftKey,ctrlKey,altKey和metaKey屬性。

在發(fā)生keydown和keyup事件時(shí)，event對(duì)象的keyCode屬性會(huì)包含一個(gè)鍵碼。

兼容性：IE不支持metaKey
Working With the Keyboard

mousedown,mouseup

click,dbclick

所有元素都支持鼠標(biāo)事件。

觸發(fā)順序:mousedown-->mouseup-->click-->mousedown-->mouseup-->click--dbclick。在IE8以及之前版本，有一個(gè)小bug，會(huì)跳過第二個(gè)mousedown和click

event對(duì)象:

clientX和clientY:表示事件發(fā)生時(shí)，鼠標(biāo)指針在視口中的水平和垂直坐標(biāo)

PageX和PageY:表示鼠標(biāo)光標(biāo)在頁(yè)面中的位置，因此坐標(biāo)是從頁(yè)面本身，而非視口的左邊和頂邊計(jì)算的。

screenX和screenY:可以確定鼠標(biāo)事件發(fā)生時(shí)，鼠標(biāo)指針相對(duì)于整個(gè)屏幕的坐標(biāo)信息。

shiftKey,ctrlKey,altKey和metaKey屬性。

mousedown和mouseup事件，還包括一個(gè)button屬性:表示按下或釋放的按鈕DOM的button屬性可能有如下3個(gè)值，0表示主鼠標(biāo)按鈕，1表示中間的鼠標(biāo)按鈕，2表示次鼠標(biāo)按鈕。

兼容性:

IE8以及更早版本不支持事件對(duì)象上的頁(yè)面坐標(biāo)，不過使用客戶區(qū)坐標(biāo)和滾動(dòng)信息可以計(jì)算出來。

IE8以及更早版本不支持metaKey屬性。

touchstart

在javascript中，添加到頁(yè)面上的事件處理程序數(shù)量將直接關(guān)系到頁(yè)面的整體運(yùn)行性能。

    
L
    
O
    
V
    
E


var l = document.getElementById( "love-l" );
var o = document.getElementById( "love-o" );
var v = document.getElementById( "love-v" );
var e = document.getElementById( "love-e" );

l.addEventListener("click", function () {
    alert(" L ")
}, false);
o.addEventListener("click", function () {
    alert( "O" )
}, false);
v.addEventListener("click", function () {
    alert( "V" )
}, false);
e.addEventListener("click", function () {
    alert( "E" )
}, false);

對(duì)事件處理程序過多問題的解決方案就是事件委托。

var love = document.getElementById( "love-wrapper" );
love.addEventListener("click", function ( e ) {
    switch ( e.target.id ) {
        case "love-l" : 
            alert("L");
            break;
        case "love-o" :
            alert("O");
            break;
        case "love-v" :
            alert("V");
            break;
        case "love-e" :
            alert("E");
            break;
    }
},false)

利用事件委托我們可以有效的控制相應(yīng)的事件處理程序與指定元素的連接次數(shù)。另外，在不需要的時(shí)候移除事件處理程序，也是解決這個(gè)問題的一種方案。內(nèi)存中留有那些過時(shí)不用的"空事件處理程序，也是造成Web應(yīng)用程序內(nèi)存和性能問題的主要原因"。

    


var handler = function () {
    // 刪除指定元素
    document.getElementById( "myDiv" ).removeChild();
}

var btn = document.getElementById("myBtn");

btn.addEventListener("click", handler, false);

    


var handler = function () {
    // 解除連接引用關(guān)系
    btn.removeEventListener( "click", handler, false );

    // 刪除指定元素
    document.getElementById( "myDiv" ).removeChild();
}

var btn = document.getElementById("myBtn");

btn.addEventListener("click", handler, false);