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

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

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

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

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

// 添加多個事件處理程序
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ù)無法被移除,移除失敗
},false);
   // 改寫
   var handler = function () {
    alert(this.id);
   };
   btn.addEventListener("click",handler,false);
   // 再次移除事件處理程序
   btn.removeEventListener("click",handler,false);// 移除成功

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

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

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

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

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

優(yōu)點:一個元素可以添加多個事件處理程序
缺點:只支持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的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法(DOM0級或DOM2)級，都會傳入event對象。event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性和方法也不一樣。不過，所有事件都有下表列出的成員

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

1.currentTarget與target

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

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
};

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

2.preventDefault()與cancelable

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

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

3.stopPropagation()與eventPhase

stopPropagation() : 取消事件進一步捕獲或冒泡，如果bubbles為true，則可以使用這個方法
eventPhase        : 調(diào)用事件處理程序的階段:1.表示捕獲階段2.表示"處于目標階段"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

點擊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 ) {
    // 阻止進一步的事件冒泡
    e.stopPropagation();
    alert( e.eventPhase );// 2
}, false );

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

點擊btn按鈕彈出1，2。

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

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

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

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

點擊btn按鈕彈出1。

訪問IE中的event對象有幾種不同的方式，取決于指定事件處理程序的方法。IE的event對象同樣也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。與DOM中的event對象一樣，這些屬性和方法也會因為事件類型的不同而不同,但所有事件對象都會包含下表所列的屬性和方法。

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

1.srcElement

事件的目標(與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

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

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

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

3.cancelBubble

默認值為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對象有幾種不同的方式，取決于指定事件處理程序的方法。在使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在。使用IE事件處理程序，event對象可以通過window對象進行訪問，同時也會被當(dāng)做參數(shù)傳遞。

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

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

DOMContentLoaded :

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

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

hashchange :

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

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

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

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

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

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

event對象

shiftKey,ctrlKey,altKey和metaKey屬性。

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

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

mousedown,mouseup

click,dbclick

所有元素都支持鼠標事件。

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

event對象:

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

PageX和PageY:表示鼠標光標在頁面中的位置，因此坐標是從頁面本身，而非視口的左邊和頂邊計算的。

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

shiftKey,ctrlKey,altKey和metaKey屬性。

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

兼容性:

IE8以及更早版本不支持事件對象上的頁面坐標，不過使用客戶區(qū)坐標和滾動信息可以計算出來。

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

touchstart

在javascript中，添加到頁面上的事件處理程序數(shù)量將直接關(guā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);

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

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ù)。另外，在不需要的時候移除事件處理程序，也是解決這個問題的一種方案。內(nèi)存中留有那些過時不用的"空事件處理程序，也是造成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);