摘要：響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序或事件偵聽(tīng)器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，觸發(fā)執(zhí)行效果，解決事件處理程序過(guò)多問(wèn)題。事件委托優(yōu)點(diǎn)提高性能。

JavaScript簡(jiǎn)單入門(mén)可以看看我丑丑的Github博客JavaScript簡(jiǎn)單入門(mén)

JavaScript與HTML之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件是文檔或者瀏覽器窗口中發(fā)生的，特定的交互瞬間。

事件流描述的是從頁(yè)面中接收事件的順序。
事件傳播的順序?qū)?yīng)瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。

事件開(kāi)始時(shí)是由較為不具體的節(jié)點(diǎn)接收，然后逐級(jí)向下傳播到最具體的節(jié)點(diǎn) 。

事件開(kāi)始時(shí)是由最具體的節(jié)點(diǎn)接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)。

“DOM2級(jí)事件”規(guī)定事件流包括三個(gè)階段：

事件捕獲階段 -->  處于目標(biāo)階段 -->  事件冒泡階段     

● 事件捕獲：事件發(fā)生時(shí)（onclick,onmouseover……）首先發(fā)生在document上，然后依次傳遞給body，最后到達(dá)目的節(jié)點(diǎn)（即事件目標(biāo)）
● 事件冒泡：事件到達(dá)事件目標(biāo)之后不會(huì)結(jié)束，會(huì)逐層向上冒泡，直至document對(duì)象，跟事件捕獲相反

例如單擊頁(yè)面div

事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，如click,load和mouseover都是事件的名字。響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序（或事件偵聽(tīng)器）。事件處理程序的名字以"on"開(kāi)頭。
為事件指定事件處理程序的方法主要有3種。

事件直接加在DOM元素上。

//原生函數(shù)

//自定義函數(shù)

把一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩浴?/p>

DOM2級(jí)事件處理程序可以為一個(gè)元素添加多個(gè)事件處理程序。其定義了兩個(gè)方法用于添加和刪除事件處理程序：addEventListener()和removeEventListener()。
優(yōu)點(diǎn):

可以綁定多個(gè)事件。

可以解除相應(yīng)的綁定

addEventListener

elementObject.addEventListener(eventName,handle,useCapture); IE8及以下不支持，屬于DOM2級(jí)的方法，可添加多個(gè)方法不被覆蓋

removeEventListener

通過(guò)addEventListener添加的事件處理程序必須通過(guò)removeEventListener刪除，且參數(shù)一致。

attachEvent
elemObject.attachEvent("eventName", functionReference); IE特有，兼容IE8及以下，可添加多個(gè)事件處理程序，只支持冒泡階段

useCapture：（可選）指定事件是否在捕獲或冒泡階段執(zhí)行。true，捕獲。false，冒泡。默認(rèn)false。

detachEvent

通過(guò)attachEvent添加的事件處理程序必須通過(guò)detachEvent方法刪除，且參數(shù)一致。

function addEvent(obj,type,handle){
    try{  
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  
        // IE8.0及其以下版本
            obj.attachEvent("on" + type,handle);
        }catch(e){  
        // 早期瀏覽器
            obj["on" + type] = handle;
        }
    }
}

給對(duì)象的事件屬性賦值為null，可取消此事件的所有注冊(cè)過(guò)的處理事件程序。

document.body.onclick=null;     //onclick屬性賦值為null，相當(dāng)于注銷了onclick事件

阻止通過(guò)on這種方式綁定的事件的默認(rèn)事件

ele.onclick = function() {
    return false;              //通過(guò)返回false值阻止默認(rèn)事件行為
};

阻止事件冒泡

標(biāo)準(zhǔn)事件對(duì)象是e.stopPropagation()，IE則使用e.cancelBubble = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.stopPropagation();   
});
//IE
btn.attachEvent("onclick", function(event) {
    event.cancelBubble = true;  
});

阻止默認(rèn)事件

標(biāo)準(zhǔn)事件對(duì)象使用preventDefault()，IE則使用returnValue = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.preventDefault(); 
});
//IE
btn.attachEvent("onclick", function(event) {
    event.returnValue = false;
});

事件在瀏覽器中是以對(duì)象的形式存在的，即event。觸發(fā)一個(gè)事件，就會(huì)產(chǎn)生一個(gè)事件對(duì)象event，該對(duì)象包含著所有與事件有關(guān)的信息。
部分屬性如下：

type屬性，被觸發(fā)的事件的類型

target屬性，直接事件目標(biāo)，真正觸發(fā)事件的目標(biāo)

currentTarget屬性，其事件處理程序當(dāng)前正在處理事件的那個(gè)元素

在事件處理程序內(nèi)部，對(duì)象this始終等于currentTarget的值，而target則是包含事件的實(shí)際目標(biāo)。

通過(guò)attachEvent()添加的事件處理程序，event對(duì)象作為參數(shù)傳入

部分屬性如下：

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

function showMsg(event){
    event = event || window.event;  
    var ele = event.target || event.srcElement; 
    ......
 }

IE事件處理程序中this的值等于 window 對(duì)象，而在標(biāo)準(zhǔn)事件綁定當(dāng)中，this的值等于被綁定的元素。

var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
    alert(this === window);              // true
});
btn.addEventListener("click", function(event) {
    alert(this === btn);                  // true
});

利用冒泡的原理，把事件加到父元素或祖先元素上，觸發(fā)執(zhí)行效果，解決事件處理程序過(guò)多問(wèn)題。
事件委托優(yōu)點(diǎn)：

提高JavaScript性能。事件委托可以顯著的提高事件的處理速度，減少內(nèi)存的占用

動(dòng)態(tài)的添加DOM元素，不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。

    
red
    
orange
    
yellow
    
green