多數(shù)支持DOM事件流的瀏覽器都實(shí)現(xiàn)了一種特定的行為：即使"DOM2級(jí)事件"規(guī)范明確要求捕獲階段不會(huì)涉及事件目標(biāo)，但I(xiàn)E9、Safari、Chrome、Firefox和Opera9.5及更高版本都會(huì)在捕獲階段觸發(fā)事件對(duì)象上的事件。結(jié)果，就有兩個(gè)機(jī)會(huì)在目標(biāo)對(duì)象上面操作事件。(注意，IE8及更早版本不支持DOM事件流)

下面這段程序，可以看出在捕獲階段(機(jī)會(huì)1)和冒泡階段(機(jī)會(huì)2)都在目標(biāo)對(duì)象上操作(觸發(fā))了事件

運(yùn)行這段程序，分別點(diǎn)擊紅黃綠區(qū)域，感受下DOM事件執(zhí)行的順序：(在DOM2級(jí)事件處理程序中，綁定在目標(biāo)元素上的事件執(zhí)行順序是按事件的注冊(cè)先后順序執(zhí)行的，所以alert3.2在3.1之前。)

  
    
    
  

    

        

            
click me
        
    
  

事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。如click,load,mouseover等都是事件的名字。而響應(yīng)某個(gè)事件的函數(shù)叫事件處理程序。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick。為事件指定處理程序的方式有好幾種。

2.1 HTML事件處理程序

某個(gè)元素支持的每種事件，都可以使用一個(gè)與之相應(yīng) 事件處理程序 同名的 HTML 特性(屬性)來指定。這個(gè)特性的值應(yīng)該是能執(zhí)行的Javascript代碼。例如，要在按鈕被單擊時(shí)執(zhí)行一些Javascript：。

在HTML中指定事件處理程序有兩個(gè)缺點(diǎn)

缺點(diǎn)一 時(shí)間差，HTML加載完成，但js還未加載完成(一般情況，HTML是按注冊(cè)順序加載的)，如果在showMessage()函數(shù)解析前就單擊事件，便會(huì)引發(fā)錯(cuò)誤。

解決辦法:將HTML事件處理程序封裝在一個(gè)try-catch塊中

/番外篇/

try...catch 的作用是測試代碼中的錯(cuò)誤。

語法：

try
{
   //在此運(yùn)行代碼
   tryStatements
}
catch(err)
{
   //在此處理錯(cuò)誤
  catchStatements 
}

參數(shù)：

tryStatements 必選項(xiàng)，可能發(fā)生錯(cuò)誤的代碼
catchStatements 可選項(xiàng)，發(fā)生tryStatements中關(guān)聯(lián)的錯(cuò)誤后執(zhí)行的代碼

示例一，請(qǐng)點(diǎn)擊確定/取消

語法：

try  {  
   tryStatements}  
catch(exception){  
   catchStatements}  
finally  {  
   finallyStatements}

參數(shù)：
finallyStatements：可選項(xiàng)，當(dāng)tryStatements，catchStatements皆拋出錯(cuò)誤執(zhí)行的代碼

示例二 與稍后講的跨瀏覽器處理程序比較，與if...elaeif...else比較(對(duì)這里的方法若不理解，后面會(huì)講到)

缺點(diǎn)二 HTML與javascript代碼緊密耦合，如果要更換事件處理程序，HTML部分和javascript部分都要修改。(另外一個(gè)缺點(diǎn)會(huì)在后續(xù)另篇文章解析)

2.2 DOM0級(jí)事件處理程序

通過Javascript指定事件處理程序的傳統(tǒng)方式，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?。這種為事件處理程序賦值的方法，在第四代WEB瀏覽器出現(xiàn)，至今所有的瀏覽器都支持。要使用javascript指定事件處理程序，首先必須取得一個(gè)要操作的對(duì)象的引用。

每個(gè)元素(包括window document)都有自己的事件處理程序?qū)傩?，這些屬性通常全部小寫，例如onclick。如下

在此我們通過一個(gè)文檔對(duì)象取得一個(gè)按鈕的引用，然后為他指定了onclick事件處理程序，但要注意在這些代碼(比如這里的showmessage函數(shù)代碼)運(yùn)行以前不會(huì)指定事件處理程序(指的是當(dāng)你點(diǎn)擊按鈕時(shí)，不會(huì)執(zhí)行showmessage函數(shù)代碼，因?yàn)檫@些代碼有可能還沒有運(yùn)行)，因此如果這些代碼在頁面中位于按鈕后面，有可能在一段時(shí)間內(nèi)怎么點(diǎn)擊都沒有反應(yīng)。

2.2.1 番外篇

很多同學(xué)或許納悶 oBtn.onclick=showMessage； 與 oBtn.onclick=showMessage()； 區(qū)別

showMessage是一個(gè)函數(shù)名，ECMAscript中函數(shù)是一個(gè)對(duì)象，函數(shù)名則是一個(gè)指向函數(shù)對(duì)象的指針，使用不帶括號(hào)的函數(shù)名是訪問函數(shù)指針，而不是調(diào)用函數(shù)。若要調(diào)用則帶括號(hào)。

我是這樣理解的 var funName=function(){...}; 是一個(gè)函數(shù)表達(dá)式，這個(gè)函數(shù)表達(dá)式是將一個(gè)匿名函數(shù)賦值給一個(gè)變量。在JS是面向?qū)ο缶幊陶Z言，變量也是對(duì)象。

上例我們看出函數(shù)表達(dá)式后加()直接調(diào)用。這樣理解 var funName=function(){...}; 便是一個(gè)函數(shù)表達(dá)式，oBtn.onclick=showMessage()； 這樣便是把他看成一個(gè)函數(shù)表達(dá)式，并且直接執(zhí)行這個(gè)函數(shù)，而不是DOM0級(jí)事件處理程序。這塊知識(shí)我在另一篇文章中有詳細(xì)講解 https://segmentfault.com/a/11...

2.2.2 DOM0級(jí)事件處理程序的作用域

使用DOM0級(jí)方法指定事件處理程序被認(rèn)為是元素的方法(之所以稱元素的方法，是因?yàn)槭褂肈OM0級(jí)事件處理程序必須首先獲得一個(gè)操作對(duì)象，這個(gè)操作對(duì)象也就是DOM元素)。因此這時(shí)事件處理程序是在元素的作用域中進(jìn)行。那么，程序中的this引用當(dāng)前元素。在事件處理程序中可以通過this訪問元素的任何屬性和方法。DOM0級(jí)事件處理程序會(huì)在事件流的冒泡階段被處理。

var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
    alert(this.id)
};

2.2.3 刪除DOM0級(jí)事件處理程序

oBtn.onclick=null;

2.3 DOM2級(jí)事件處理程序

DOM2級(jí)事件處理程序定義了兩個(gè)方法：用于處理指定和刪除事件處理程序的操作，addEventListener()和removeEventListener()。所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法。都接收三個(gè)參數(shù)：要處理的事件名，作為事件處理程序的函數(shù)和布爾值。true表示在捕獲階段調(diào)用事件處理程序，false表示在冒泡階段調(diào)用事件處理程序。使用DOM2級(jí)方法指定事件處理程序也被認(rèn)為是元素的方法，事件處理程序也是在元素的作用域中運(yùn)行的，也可以通過this訪問元素的任何屬性和方法。

2.3.1 DOM2級(jí)事件處理程序優(yōu)點(diǎn)

可以添加多個(gè)事件處理程序。并且按添加的順序觸發(fā)。

var oBtn=docunment.getElementById("myBtn");
oBtn.addEventListener("click",function(){alert(this.id)},false);
oBtn.addEventListener("click",function(){alert("hello")},false);

2.3.1 DOM2級(jí)事件處理程序的移除

通過addEventListener()添加的事件處理程序只能用removeEventListener()移除，并且傳入?yún)?shù)要與添加處理程序參數(shù)完全相同。意味著通過abbEventListener()添加的匿名函數(shù)無法被移除。

為了兼容各種瀏覽器我們大多數(shù)將事件處理程序添加到事件流的冒泡階段。除非為了在事件到達(dá)目標(biāo)前捕獲他，才將事件處理程序添加到捕獲階段。

2.3.2 支持的瀏覽器

IE9，F(xiàn)irefox,Safari,Chrome和Opers支持DOM2級(jí)事件處理程序。

2.4 IE事件處理程序

IE事件處理程序，指定和刪除事件處理程序方法：attachEvent()和detachEvent().接受相同的兩個(gè)參數(shù)，事件處理程序名稱與事件處理程序函數(shù)，(注意DOM2級(jí)第一個(gè)參數(shù)是事件名)。通過attachEvent()添加的事件處理程序都會(huì)被加到冒泡階段，是因?yàn)镮E8及更早版本只支持冒泡事件流

使用attachEvent()為按鈕添加一個(gè)事件處理程序.

var bnt = document.getElementById("bnt");
btn.attachEvent("onclick",function(){alert("hello");});

IE事件處理程序與DOM0級(jí)事件處理程序主要區(qū)別：事件處理程序的作用域。使用DOM0級(jí)方法，事件處理程序是在其所屬元素內(nèi)運(yùn)行；attachElent()方法時(shí)，事件處理程序是在全局作用域中運(yùn)行，this值因此等于Window. 在編寫跨瀏覽器代碼時(shí)牢記這一區(qū)別(跨瀏覽器稍后會(huì)說到)

同DOM2級(jí)事件處理程序一樣，移除事件只能通過detachEvent()移除，并且傳入的參數(shù)要一樣。

2.4.1支持的瀏覽器

IE和Opera

2.5跨瀏覽器事件處理程序

回顧一下前面的幾種事件處理程序。HTML事件處理程序，DOM0級(jí)事件處理程序，DOM2級(jí)事件處理程序，IE事件處理程序。

HTML事件處理程序，適合所有瀏覽器；DOM0級(jí)，適合所有瀏覽器；DOM2級(jí)，適合IE9，F(xiàn)irefox,Safari,Chrome和Opers；IE事件處理程序，適合IE和Opera。

2.5.1 跨瀏覽器事件處理程序

為了以跨瀏覽器方式處理事件，方法一，使用能夠隔離瀏覽器差異的javascript庫。方法二，自己開發(fā)最適合的處理方法。我們這里使用的便是方法二。運(yùn)用能力檢測思想。我們要保證處理事件的代碼在大多數(shù)瀏覽器下一致的運(yùn)行，只需關(guān)注冒泡階段(因?yàn)樗鞋F(xiàn)代瀏覽器都支持事件冒泡)。

在講跨瀏覽器事件處理程序之前，我們先溫習(xí)一下Object。創(chuàng)建Object實(shí)例的方式有兩種

使用NEW操作符后跟Object實(shí)例，var person = new Object(); person.name="liMing"; person.age = 29;

第二種是使用對(duì)象字面量表示法，var person = {name:"liMing",age:29};

訪問對(duì)象屬性方法也有兩種

點(diǎn)表示法。alert(person.name);

第二種是是方括號(hào)表示法，alert(person["name"]);//優(yōu)點(diǎn)，可以通過變量來訪問屬性

創(chuàng)建一個(gè)對(duì)象eventUtil，對(duì)象包含兩個(gè)方法，一個(gè)方法給元素添加事件addHeadler()，另一個(gè)方法給元素去除事件removeHeader()。方法接受三個(gè)參數(shù)，要操作的元素，事件名稱，和事件處理程序函數(shù)。

var EventUtil = {
  addHandler : function (element,type,handler){
    if (element.addEventListener) {
      element.addEventListener(type,handler,false);
    }else if (element.attachEvent) {
      element.attachEvent("on"+type,handler);
    }else {
      element["on"+type]=handler;
    }
  },
  removeHandler : function(element.type,handler){
    if (element.removeEventListener) {
      element.addEventListener(type,handler,false);
    }else if (element.attachEvent) {
      element.attachEvent("on"+type,handler);
    }else {
      element["on"+type]=null;
    }
  } 
};

引用：EventUnit.addHandler(element,"click",handler);

簡析：可以將EventUnil看成使用對(duì)象字面量法創(chuàng)建的Object實(shí)例。addHandler,removeHandler看成對(duì)象的屬性。在ECMAScript中函數(shù)名本身就是變量，所以函數(shù)也可以作為值來使用，所以可以講function(evement,type,handler){}看作是屬性的值。因?yàn)镋CMAScript中函數(shù)可以傳進(jìn)來多個(gè)參數(shù)，參數(shù)的數(shù)據(jù)類型不限制，所以這里可以傳入對(duì)象eventment,字符串type,函數(shù)/對(duì)象handler.

引用形式的簡析：
創(chuàng)建一個(gè)對(duì)象：var person = {name:"liMing"}; 也可以var person=new Object(); person.name="liMing";
那么EventUnil.addHandler(element,"click",handler)可以理解為var EventUnil.addHandler=function(){};這一函數(shù)表達(dá)式的調(diào)用。注，以上簡析均是個(gè)人理解，若不正確，希望指正。

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象Event，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息。所有的瀏覽器都支持Event對(duì)象，但支持的方式不同。

3.1 DOM中的事件對(duì)象

無論指定事件處理程序時(shí)使用什么方法(DOM0,DOM2)，都會(huì)傳入Event對(duì)象。event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法，觸發(fā)的事件類型不一樣，可用的屬性和方法也不一樣，不過，所有事件都會(huì)有下表列出的成員

3.1.1 currentTarget 與 target

在事件處理程序內(nèi)部，對(duì)象this始終等于currentTarget的值，而target則只包含事件的實(shí)際目標(biāo)。事件處理程序存在于按鈕的父節(jié)點(diǎn)中(例如document.body)

document.body.onclick=function(event){
  alert(event.currentTarget===document.body);//true
  alert(this===document.body);//true
  alert(event.target===document.getElementById("myBtn")); //true
}

該結(jié)果是由于按鈕上沒有注冊(cè)事件處理程序，點(diǎn)擊按鈕時(shí)，click事件冒泡到了document.body，在那里事件才得到處理。

3.1.2 type

在需要一個(gè)函數(shù)處理多個(gè)事件時(shí)，可使用type屬性

var btn = document.getElementById("myBtn");
var handler = function(event){
  switch (event.type){
    case "click";
    alert("clicked");
    break;

    case "mouseover";
    event.target.style.backgroundColor = "red";
    break;

    case "mouseout";
    event.target.style.backgroundColor = "";
    break;
  }
};
btn.click = handler;
btn.mouseover = handler;
btn.mouseout = handler;

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

取消特定事件的默認(rèn)行為。例如，鏈接的默認(rèn)行為就是在被單擊時(shí)會(huì)導(dǎo)航到href特性指定的URL，如果你想阻止鏈接導(dǎo)航這一默認(rèn)行為，通過鏈接的onclick事件處理程序取消它。

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
};

3.1.4 取消進(jìn)一步事件的捕獲或冒泡 stopPropagation()

在講currentTarget與target時(shí)，我們知道按鈕沒有注冊(cè)事件處理程序，click事件冒泡到了document,body上。現(xiàn)在我們可以阻止冒泡行為了，結(jié)果避免觸發(fā)注冊(cè)在document.body上的事件處理程序

  var btn = document.getElementById("myBtn");
  btn.onclick = function(event){
    event.stopPropagation();
  };
  document.body.onclick = function(event){
    alert(event.currentTarget===document.body);
    alert(this===document.body);
    alert(event.target===btn);
  };
  

3.1.5 確定事件位于當(dāng)前事件流那個(gè)階段eventPhase

注意，只有在事件處理程序執(zhí)行期間，event對(duì)象才會(huì)存在，一旦事件處理程序執(zhí)行完畢，event對(duì)象便會(huì)被銷毀。

3.2 IE中的事件對(duì)象

要訪問IE中的event對(duì)象有幾種不同的方式，訪問的方式取決于指定事件處理程序的方法。

使用DOM0級(jí)方法添加事件處理程序。event對(duì)象作為window對(duì)象的一個(gè)屬性存在。

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

使用IE方法添加事件處理程序，event對(duì)象作為參數(shù)傳入事件處理程序中。

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

通過HTML特性指定事件處理程序，通過一個(gè)名為event變量訪問event對(duì)象(與DOM中的事件模型相同)

3.2.1 IE中event對(duì)象的屬性和方法

其中很多屬性和方法都有對(duì)應(yīng)的或相關(guān)的DOM屬性和方法，與DOM的event對(duì)象一樣，這些屬性和方法也會(huì)因?yàn)槭录愋偷牟煌煌?，但所有事件?duì)象都會(huì)包含下表所列的屬性和方法

3.2.2 事件目標(biāo)
因?yàn)槭录幚沓绦蜃饔糜蚴歉鶕?jù)指定他的方式確定的，所以不能認(rèn)為this始終等于事件目標(biāo)。由于我的瀏覽器版本問題，書中的現(xiàn)象復(fù)現(xiàn)不了，所以用下程序代替。

  var btn = document.getElementById("myBtn");
  function showMes(event){
    var event = window.event||event;
    var ele = event.target||event.srcElement;
    alert(ele === this);
  };
  var eventUnit = {
    addHandler: function(element,type,handler){
      if (element.attachEvent) {
        element.attachEvent(type,handler)
      }else{
        element[type]=handler;
      }
    }
  };
  eventUnit.addHandler(btn,"onclick",showMes);

3.2.3 取消事件的默認(rèn)行為，returnValue

returnValue屬性相當(dāng)與DOM中的preventDefault()方法，只要將returnValue設(shè)置為falsae就可以阻止事件的默認(rèn)行為。同樣因?yàn)闉g覽器版本問題，書中代碼修改如下：

  var link = document.getElementById("myLink");
  function stopEvent(event){
    var event = event||window.event;
    event.returnValue = false;
    event.preventDefault();
  };
  link.onclick = stopEvent;

3.2.4 阻止事件冒泡 cancelBubble

cancelBubble屬性與DOM中的stopPropagatioin()方法作用相同，IE不支持事件捕獲，所以只用取消事件冒泡。事件處理程序中將cancelBubble設(shè)置為true便可以阻止事件冒泡行為。

3.3 跨瀏覽器的事件對(duì)象

  
  W3School
  

本文參考javascript高級(jí)程序設(shè)計(jì)第三版