我們可以使用event中的對(duì)象和方法：

阻止事件的默認(rèn)行為

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

立即停止事件在DOM的傳播

通過(guò)調(diào)用event.stopPropagation()方法避免彈框出現(xiàn)兩次。

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

訪問(wèn)IE中的事件對(duì)象event，方法有多種，取決于事件處理程序的方法：

DOM0級(jí)方法，使用window.event

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

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

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

雖然DOM和IE中event對(duì)象不同，但我們也可以和前面的 跨瀏覽器事件處理程序 處理一樣，通過(guò)他們之間的區(qū)別，實(shí)現(xiàn)映射：

var my_event = {
    myAddFun : function(element, type, handler){
        // do some thing
    },
    // 返回對(duì)event的引用
    getMyEvent : function(event){
        return event?event:window.event;
    },
    // 返回事件的目標(biāo)
    getMyTarget : function(event){
        return event.target || event.srcElement;
    },
    // 取消事件的默認(rèn)行為
    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級(jí)事件規(guī)定有以下幾類事件類型：

UI事件：當(dāng)用戶與頁(yè)面上元素交互時(shí)觸發(fā)；

焦點(diǎn)事件：當(dāng)元素失去或獲取焦點(diǎn)時(shí)觸發(fā)；

鼠標(biāo)事件：當(dāng)用戶通過(guò)鼠標(biāo)在頁(yè)面操作時(shí)觸發(fā)；

滾輪事件：當(dāng)使用鼠標(biāo)滾輪（或類似設(shè)備）時(shí)觸發(fā)；

文本事件：當(dāng)在文檔中輸入文本時(shí)觸發(fā)；

鍵盤(pán)事件：當(dāng)用戶通過(guò)鍵盤(pán)操作時(shí)觸發(fā)；

合成事件：當(dāng)為IME輸入字符時(shí)觸發(fā)；

變動(dòng)事件：當(dāng)?shù)讓覦OM結(jié)構(gòu)變動(dòng)時(shí)觸發(fā)；

具體每個(gè)方法的詳細(xì)介紹，可以查看W3school HTML DOM Event 對(duì)象
或者查看《JavaScript高級(jí)程序設(shè)計(jì)（第三版）》的第362頁(yè)開(kāi)始。
我后面會(huì)多帶帶整理一篇，介紹這些事件的文章。

簡(jiǎn)單理解就是講一個(gè)響應(yīng)事件委托到另一個(gè)元素。
事件委托利用事件冒泡，指定一個(gè)事件處理程序來(lái)管理某一類型的所有事件，比如我們通過(guò)一個(gè)函數(shù)來(lái)代替其他三個(gè)函數(shù)：

    
按鈕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點(diǎn)擊");
});
my_event.myAddFun(btn2, "click", function(event){
    alert("btn2點(diǎn)擊");
});
my_event.myAddFun(btn3, "click", function(event){
    alert("btn3點(diǎn)擊");
});

下面我們?cè)?strong>DOM樹(shù)層級(jí)更高的元素上添加一個(gè)事件處理函數(shù)，來(lái)做事件委托，我們這么重寫(xiě)這段代碼：

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點(diǎn)擊");
            break;
        case "btn2":
            alert("btn2點(diǎn)擊");
            break;
        case "btn3":
            alert("btn3點(diǎn)擊");
            break;
    }
});

最適合采用事件委托技術(shù)的事件包括：click/mousedown/mouseup/keyup/keydown/keypress，雖然mouseover和mouseout事件也有冒泡，但因?yàn)椴缓锰幚硭鼈儾⑶医?jīng)常需要重新計(jì)算元素位置。

可以看出，事件委托有以下優(yōu)點(diǎn)：

減少內(nèi)存消耗

動(dòng)態(tài)綁定事件

JavaScript的事件模擬主要用來(lái)在任意時(shí)刻觸發(fā)特定事件。

在document對(duì)象上使用createEvent()方法創(chuàng)建一個(gè)event對(duì)象。
createEvent()接收一個(gè)參數(shù)，即要?jiǎng)?chuàng)建的事件類型的字符串。
DOM2級(jí)中，所有這些字符串都使用英文復(fù)數(shù)形式，DOM3級(jí)中都變成單數(shù)，也可以是下面中的字符串：

UIEvents : 一般化的UI事件（鼠標(biāo)和鍵盤(pán)事件都繼承自UI事件）（DOM3級(jí)中UIEvent）

MouseEvents : 一般化的鼠標(biāo)事件（DOM3級(jí)中MouseEvent）

MutationEvents : 一般化的DOM滾動(dòng)事件（DOM3級(jí)中MutationEvent）

HTMLEvents : 一般化的HTML事件（DOM3級(jí)中HTMLEvent）

創(chuàng)建event之后，我們需要使用dispatchEvent()方法去觸發(fā)這個(gè)事件，需要傳入一個(gè)參數(shù)，參數(shù)是需要觸發(fā)事件的event對(duì)象。

所有支持事件的DOM節(jié)點(diǎn)都支持這個(gè)方法。事件觸發(fā)之后，事件就能照樣冒泡并引發(fā)響應(yīng)事件處理程序的執(zhí)行。

使用createEvent()方法傳入MouseEvents創(chuàng)建一個(gè)鼠標(biāo)事件，返回的對(duì)象有一個(gè)initMouseEvent()方法，用于指定與該鼠標(biāo)事件相關(guān)的信息，有15個(gè)參數(shù)：

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

bubble : 布爾值，表示是否冒泡，為了精確模擬鼠標(biāo)事件，通常設(shè)置為true

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

view : 與事件關(guān)聯(lián)的視圖，基本都設(shè)置為document.defaultView

detail : 整數(shù)，與事件有關(guān)的詳細(xì)信息，基本設(shè)置為0

screenX : 整數(shù)，事件相對(duì)屏幕的X坐標(biāo)

screenY : 整數(shù)，事件相對(duì)屏幕的Y坐標(biāo)

clientX : 整數(shù)，事件相對(duì)視口的X坐標(biāo)

clientY : 整數(shù)，事件相對(duì)視口的Y坐標(biāo)

ctrlKey : 布爾值，表示是否按下Ctrl鍵，默認(rèn)false

altKey : 布爾值，表示是否按下Alt鍵，默認(rèn)false

shiftKey : 布爾值，表示是否按下Shift鍵，默認(rèn)false

metaKey : 布爾值，表示是否按下Meta鍵，默認(rèn)false

button : 整數(shù)，表示按下哪個(gè)鼠標(biāo)鍵，默認(rèn)0

relatedTarget : 對(duì)象，表示與事件相關(guān)的對(duì)象，只在mouseover和mouseout時(shí)使用

案例：

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級(jí)規(guī)定，使用createEvent()方法傳入KeyboardEvent創(chuàng)建一個(gè)鍵盤(pán)事件，返回的對(duì)象有一個(gè)initKeyEvent()方法，有8個(gè)參數(shù)：

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

bubble : 布爾值，表示是否冒泡，為了精確模擬鍵盤(pán)事件，通常設(shè)置為true

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

view : 與事件關(guān)聯(lián)的視圖，基本都設(shè)置為document.defaultView

key : 整數(shù)，表示按下的鍵的鍵碼

localtion : 整數(shù)，表示按下哪里的鍵，默認(rèn)0表示主鍵盤(pán)，1表示左，2表示右，3表示數(shù)字鍵盤(pán)，4表示移動(dòng)設(shè)備（即虛擬鍵盤(pán)），5表示手柄

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

repeat : 整數(shù)，在一行中按了多少次這個(gè)鍵

由于DOM3級(jí)不提倡使用keypress事件，因此只能用這個(gè)方式來(lái)模擬keyup/keydown事件。

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

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

// 以DOM3級(jí)方式創(chuàng)建
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);

如模擬變動(dòng)事件和HTML事件。

模擬變動(dòng)事件

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

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

模擬HTML事件

通過(guò)createEvent()傳入HTMLEvents參數(shù)創(chuàng)建，返回一個(gè)initEvent()方法，下面模擬一個(gè)案例：

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

通過(guò)createEvent()傳入CustomEvent參數(shù)創(chuàng)建，返回一個(gè)initCustomEvent()方法，有4個(gè)參數(shù)：

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

bubble : 布爾值，表示是否冒泡，為了精確模擬鍵盤(pán)事件，通常設(shè)置為true

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

detail : 對(duì)象，任意值，保存在event對(duì)象的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級(jí)方式穿件
if(document.implementation.hasFeature("CustomEvents", "3.0")){
    myEvent = document.createEvent("CustomEvent");
    myEvent.initCustomEvent(
        "myevent", true, false, "hello leo",
    );
    btn.dispatchEvent(myEvent);
}

IE8及之前的版本模擬事件和DOM中模擬思路相似：想創(chuàng)建event對(duì)象再指定信息，最后觸發(fā)。
區(qū)別在于，IE中使用document.createEventObject()方法創(chuàng)建event對(duì)象，并且不接收參數(shù)，返回一個(gè)通用event對(duì)象，我們要做的就是給這個(gè)event對(duì)象添加信息，最后在目標(biāo)上調(diào)用fireEvent()方法，并接受兩個(gè)參數(shù)（事件處理程序的名稱和event對(duì)象）。
在調(diào)用fireEvent()方法會(huì)自動(dòng)添加srcElement和type屬性，我們需要手動(dòng)添加其他屬性，下面模擬一個(gè)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高級(jí)程序設(shè)計(jì)》第13章 事件

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .