我們可以使用event中的對象和方法：

阻止事件的默認行為

var leo = document.getElementById("leo");
leo.onclick = function(event){
    // 只有當 event 中的 cancelable 屬性為true的事件
    event.preventDefault();
}

立即停止事件在DOM的傳播

通過調用event.stopPropagation()方法避免彈框出現兩次。

var leo = document.getElementById("leo");
leo.onclick = function(event){
    alert("leo");
    event.stopPropagation();
}
document.body.onclick = function(event){
    alert("hello leo");
}

訪問IE中的事件對象event，方法有多種，取決于事件處理程序的方法：

DOM0級方法，使用window.event

var leo = document.getElementById("leo");
leo.onclick = function(){
    var event = window.event;
    alert(event.type);   // "click"
}

IE的attachEvent方法，event作為參數傳入（也可以使用window.event）

var leo = document.getElementById("leo");
leo.attachEvent("onclick",function(event){
    alert(event.type);   // "click"
},false);

雖然DOM和IE中event對象不同，但我們也可以和前面的 跨瀏覽器事件處理程序 處理一樣，通過他們之間的區別，實現映射：

var my_event = {
    myAddFun : function(element, type, handler){
        // do some thing
    },
    // 返回對event的引用
    getMyEvent : function(event){
        return event?event:window.event;
    },
    // 返回事件的目標
    getMyTarget : function(event){
        return event.target || event.srcElement;
    },
    // 取消事件的默認行為
    preventDefault : function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },

    myRemoveFun : function(element, type, handler){
        // do some thing
    },

    // 阻止事件流
    stopPropagetion : function(event){
        if(event.stopPropagetion){
            event.stopPropagetion();
        }else {
            event.cancelBubble = true;
        }
    }
}

var leo = document.getElementById("leo");
leo.onclick = function(event){
    alert("leo");
    event = my_event(event);
    my_event.stopPropagation(event);
}

leo.onclick = function(event){
    alert("hello world");
}

Web瀏覽器中的事件類型有很多，DOM3級事件規定有以下幾類事件類型：

UI事件：當用戶與頁面上元素交互時觸發；

焦點事件：當元素失去或獲取焦點時觸發；

鼠標事件：當用戶通過鼠標在頁面操作時觸發；

滾輪事件：當使用鼠標滾輪（或類似設備）時觸發；

文本事件：當在文檔中輸入文本時觸發；

鍵盤事件：當用戶通過鍵盤操作時觸發；

合成事件：當為IME輸入字符時觸發；

變動事件：當底層DOM結構變動時觸發；

具體每個方法的詳細介紹，可以查看W3school HTML DOM Event 對象
或者查看《JavaScript高級程序設計（第三版）》的第362頁開始。
我后面會多帶帶整理一篇，介紹這些事件的文章。

簡單理解就是講一個響應事件委托到另一個元素。
事件委托利用事件冒泡，指定一個事件處理程序來管理某一類型的所有事件，比如我們通過一個函數來代替其他三個函數：

    
按鈕1
    
按鈕2
    
按鈕3

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
// my_event 在前面定義了
my_event.myAddFun(btn1, "click", function(event){
    alert("btn1點擊");
});
my_event.myAddFun(btn2, "click", function(event){
    alert("btn2點擊");
});
my_event.myAddFun(btn3, "click", function(event){
    alert("btn3點擊");
});

下面我們在DOM樹層級更高的元素上添加一個事件處理函數，來做事件委托，我們這么重寫這段代碼：

var btn = document.getElementById("btn");
my_event.myAddFun(btn, "click", function(event){
    event = my_event.getMyEvent(event);
    var target = my_event.getMyTarget(event);
    switch(target.id){
        case "btn1":
            alert("btn1點擊");
            break;
        case "btn2":
            alert("btn2點擊");
            break;
        case "btn3":
            alert("btn3點擊");
            break;
    }
});

最適合采用事件委托技術的事件包括：click/mousedown/mouseup/keyup/keydown/keypress，雖然mouseover和mouseout事件也有冒泡，但因為不好處理它們并且經常需要重新計算元素位置。

可以看出，事件委托有以下優點：

減少內存消耗

動態綁定事件

JavaScript的事件模擬主要用來在任意時刻觸發特定事件。

在document對象上使用createEvent()方法創建一個event對象。
createEvent()接收一個參數，即要創建的事件類型的字符串。
DOM2級中，所有這些字符串都使用英文復數形式，DOM3級中都變成單數，也可以是下面中的字符串：

UIEvents : 一般化的UI事件（鼠標和鍵盤事件都繼承自UI事件）（DOM3級中UIEvent）

MouseEvents : 一般化的鼠標事件（DOM3級中MouseEvent）

MutationEvents : 一般化的DOM滾動事件（DOM3級中MutationEvent）

HTMLEvents : 一般化的HTML事件（DOM3級中HTMLEvent）

創建event之后，我們需要使用dispatchEvent()方法去觸發這個事件，需要傳入一個參數，參數是需要觸發事件的event對象。

所有支持事件的DOM節點都支持這個方法。事件觸發之后，事件就能照樣冒泡并引發響應事件處理程序的執行。

使用createEvent()方法傳入MouseEvents創建一個鼠標事件，返回的對象有一個initMouseEvent()方法，用于指定與該鼠標事件相關的信息，有15個參數：

type ： 字符串，表示觸發的事件類型，如click

bubble : 布爾值，表示是否冒泡，為了精確模擬鼠標事件，通常設置為true

cancelable ：布爾值，表示是否可以取消，為了精確模擬鼠標事件，通常設置為true

view : 與事件關聯的視圖，基本都設置為document.defaultView

detail : 整數，與事件有關的詳細信息，基本設置為0

screenX : 整數，事件相對屏幕的X坐標

screenY : 整數，事件相對屏幕的Y坐標

clientX : 整數，事件相對視口的X坐標

clientY : 整數，事件相對視口的Y坐標

ctrlKey : 布爾值，表示是否按下Ctrl鍵，默認false

altKey : 布爾值，表示是否按下Alt鍵，默認false

shiftKey : 布爾值，表示是否按下Shift鍵，默認false

metaKey : 布爾值，表示是否按下Meta鍵，默認false

button : 整數，表示按下哪個鼠標鍵，默認0

relatedTarget : 對象，表示與事件相關的對象，只在mouseover和mouseout時使用

案例：

var btn = document.getElementById("btn");
var myEvent = document.createEvent("MouseEvents");
myEvent.initMouseEvent(
    "click", true, true, document.defaultView, 
    0, 0, 0, 0, 0,
    false, false, false, false, 0, null
)
btn.dispatchEvent(myEvent);

DOM3級規定，使用createEvent()方法傳入KeyboardEvent創建一個鍵盤事件，返回的對象有一個initKeyEvent()方法，有8個參數：

type ： 字符串，表示觸發的事件類型，如keydown

bubble : 布爾值，表示是否冒泡，為了精確模擬鍵盤事件，通常設置為true

cancelable ：布爾值，表示是否可以取消，為了精確模擬鍵盤事件，通常設置為true

view : 與事件關聯的視圖，基本都設置為document.defaultView

key : 整數，表示按下的鍵的鍵碼

localtion : 整數，表示按下哪里的鍵，默認0表示主鍵盤，1表示左，2表示右，3表示數字鍵盤，4表示移動設備（即虛擬鍵盤），5表示手柄

modifiers : 字符串，空格分隔的修改件列表，如"shift"

repeat : 整數，在一行中按了多少次這個鍵

由于DOM3級不提倡使用keypress事件，因此只能用這個方式來模擬keyup/keydown事件。

模擬按住Shift和A鍵的案例：

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

// 以DOM3級方式創建
if(document.implementation.hasFeature("KeyboardEvents", "3.0")){
    myEvent = document.createEvent("KeyboardEvent");
    myEvent.initKeyboardEvent(
        "keydown", true, true, document.defaultView,
        "a", 0, "Shift", 0
    );
}
btn.dispatchEvent(myEvent);

如模擬變動事件和HTML事件。

模擬變動事件

通過createEvent()傳入MutationEvents參數創建，返回一個initMutationEvent()方法，這個方法接收參數包括：type/bubbles/cancelable/relatedNode/preValue/newValue/attrName/attrChange，下面模擬一個案例：

var btn = document.getElementById("btn");
var myEvent = document.createEvent("MutationEvents");
myEvent.initMutationEvent(
    "DOMNodeInserted", true, false, someNode, "", "", "", 0
);
btn.dispatchEvent(myEvent);

模擬HTML事件

通過createEvent()傳入HTMLEvents參數創建，返回一個initEvent()方法，下面模擬一個案例：

var btn = document.getElementById("btn");
var myEvent = document.createEvent("HTMLEvents");
myEvent.initEvent("focus", true, false);
btn.dispatchEvent(myEvent);

通過createEvent()傳入CustomEvent參數創建，返回一個initCustomEvent()方法，有4個參數：

type ： 字符串，表示觸發的事件類型，如keydown

bubble : 布爾值，表示是否冒泡，為了精確模擬鍵盤事件，通常設置為true

cancelable ：布爾值，表示是否可以取消，為了精確模擬鍵盤事件，通常設置為true

detail : 對象，任意值，保存在event對象的detail屬性中

案例：

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

// my_event在前面定義 2.6 跨瀏覽器事件處理程序
my_event.addMyEvent(btn, "myevent", function(event){
    alert("btn detail ", event.detail);
});

my_event.addMyEvent(document, "myevent", function(event){
    alert("document detail ", event.detail);
});


// 以DOM3級方式穿件
if(document.implementation.hasFeature("CustomEvents", "3.0")){
    myEvent = document.createEvent("CustomEvent");
    myEvent.initCustomEvent(
        "myevent", true, false, "hello leo",
    );
    btn.dispatchEvent(myEvent);
}

IE8及之前的版本模擬事件和DOM中模擬思路相似：想創建event對象再指定信息，最后觸發。
區別在于，IE中使用document.createEventObject()方法創建event對象，并且不接收參數，返回一個通用event對象，我們要做的就是給這個event對象添加信息，最后在目標上調用fireEvent()方法，并接受兩個參數（事件處理程序的名稱和event對象）。
在調用fireEvent()方法會自動添加srcElement和type屬性，我們需要手動添加其他屬性，下面模擬一個click事件：

var btn = document.getElementById("btn");
var myEvent = document.createEventObject();

myEvent.screenX = 100;
myEvent.screenY = 0;
myEvent.clientX = 100;
myEvent.clientY = 0;
myEvent.ctrlKey = false;
myEvent.altKey = false;
myEvent.shiftKey = false;
myEvent.button = 0;

btn.fireEvent("onclick", event);

《JavaScript高級程序設計》第13章 事件

本部分內容到這結束

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .