事件對象

在觸發DOM‘事件時，會產生一個事件對象 event

該對象包含著所有與事件有關的信息

所有瀏覽器都支持 event 對象但是支持的方式有所不同

DOM事件對象

兼容DOM的瀏覽器會將event對象傳入事件處理程序中

如下所示：

var btn = document.getElementByTagName("button")[0];

btn.onclick = function(event){
    alert(event.type); //"click"
}

而通過HTML特性指定的事件處理程序，變量event保存著 event 對象

<input type = "button"
 
 value = "click" onclick = "alert(event.type)" />

event 對象包含與創建它的特定事件有關的方法和屬性

如下表所示：

在事件處理程序的內部，this 始終等於 currentTarget 的值

而target只包含事件的實際目標

也就是說 this和current指向的是註冊當前事件的元素，而target是當前事件的目標元素

這兩者可能有一樣的值，而在事件委托時我們將事件註冊到目標元素的父元素上，這兩者就不相同了

當我們需要通過一個函數處理多個事件的時候

可以使用type屬性

如：

var btn = document.getElemntByTagName("button")[0]‘
var handler = function(event){
    switch(event.type){
        case "click":
            alert("clicked");
            break;
        case "mouseover":
            alert("mouseover");
            break;
        case "mouseout":
            alert("out");
            break;
    }
}

btn.onclick = handle;
btn.onmouseover = handle;
btn.onmouseout = handle;

如果希望阻止事件的默認行為，可以使用 preventDefault（） 方法

不過只有cancelable 屬性為true 的事件才能阻止默認行為

而關於stopImmediatePropagation（）和stopPropagation（）的區別在於，前者讓事件流停止在當前事件處理程序，而後者是讓事件流停在當前事件流階段

此外，只有在事件處理程序執行期間 event 對象才會存在，一旦執行完畢 event 對象就會銷毀

IE中的事件對象

與訪問DOM中的 event 對象不同，訪問IE中的 event 有幾種不同的方式，而方式取決於是如何註冊事件處理程序的

當我們使用DOM0級的方式添加事件處理程序的時候 event 對象作為 window 的一個屬性存在

而如果我們使用 attachEvent 方法添加事件處理程序，那麽就和DOM一樣 event 對象會作為一個參數傳入事件處理程序

並且也可以使用 window.event來訪問

而IE中的所有事件對象都會包含以下屬性和方法：

而IE中有一點比較重要，那就是事件處理程序的this指向和事件處理程序的指定方式有關，所以在使用時最好使用 event.srcElement 比較保險

跨瀏覽器事件對象

事件對象當然也有跨瀏覽器的實現方式

下方給出的是一個簡略的初步實現：

function eventFunction(e){
    var events;
    events = e ? e : window.event;// event對象兼容
    events.target = e.target || e.srcElement;// 目標元素兼容
    events.preventDefault = e.preventDefault || function () {
                events.returnValue = false;
     };// 阻止默認事件兼容
     events.stopPropagation = e.stopPropagation || function () {
                events.cancelBubble = true;
     };// 阻止冒泡兼容
}
      

Javascript高級編程學習筆記（59）—— 事件（3）事件對象