今天想跟大家討論下關於IE與其他瀏覽器之間的事件繫結事件的一些差別，在現在的WEB端從事DOM操作的程式設計師應該要常常為各種各樣的元素繫結各種事件，那你是否真的瞭解各瀏覽器之間的事件繫結原理呢，今天我就給大家來簡單解析下。

其實現在很多開發人員都在使用Jquery等JS框架進行開發，當然對於事件繫結不會遇到太多的相容性，因為框架本身已經解決了跨瀏覽器之間的事件繫結的相容問題。框架使用好壞就像一把雙刃劍，高效，相容性強等等都是好的一面，壞的一面當然是讓使用者對其行程了依賴性，喪失了很多機會去接觸更加底層的東西。其實本人在前兩年的工作期也是非常依賴框架帶來的便捷，當然後面也遇到了各種各樣的瓶頸，好在最後開始覺悟了，嘿嘿！好了廢話了一堆，馬上進入正題。

首先我們來說下最簡單暴力的javascript事件繫結方法吧。

1. var okBtn = document.getElementById("okBtn");
2. okBtn.onclick = function(){
3.     alert(this.id);   //"okBtn"
4. }

這個方法是全相容的，所有瀏覽器都相容的事件繫結方法，很多時候我們都會用到這個方法。雖然好用，但是這個方法仍然有弊端，因為這段程式碼他在執行前是不會指定事件處理程式的，因此這段程式碼必須在頁面中處於那個ID為okBtn的按鈕後面才行，假如這段程式碼還沒被頁面載入完的情況下，你點選這個按妞是不會有任何反應的，這樣子的事件繫結對於很多產品需求而已是無法滿足的。

所以介於這種情況下，javascript還有一種事件繫結方法。這也是我們接下來要講的重點。在現代瀏覽器中（chrome,firefox...）支援這麼一種事件繫結，通過addEventListener()來繫結事件，這個函式接受三個引數（繫結的事件物件，事件處理的函式，布林值），最後一個布林值是表示是否想要在事件捕獲階段就觸發函式，一般都是false,因為一般的事件捕獲階段是不希望就觸發函式的，關於事件捕獲不懂的同學我會在後續出一篇文章來解釋，今天就不對此做太多說明。以上的程式碼可以改成如下方法：

1. var okBtn = document.getElementById("okBtn"
   );
2. okBtn.addEventListener("click",function(){
3.     alert(this.id);   //"okBtn"
4. },false);

但是addEventListener()方法不支援IE9（不包含IE9）以下的瀏覽器，說實在的IE9和IE9以後的版本對javascript增加了很多以前只有chrome,firefox才支援的方法，終於不再坑爹。

IE9以下的瀏覽器中有這麼一個方法來繫結事件的。attachEvent()函式是用來繫結事件的，這個函式只需傳入兩個引數（繫結的事件物件，事件處理的函式）上面的方法支援IE的繫結程式碼如下：

1. var okBtn = document.getElementById("okBtn");
2. okBtn.attachEvent("onclick",function(){
3.     alert(this.id);   //"okBtn"
4. });

在IE9以下的瀏覽器都要這麼用這個方法繫結，其實今天要告訴大家的不是這個繫結方法的差別，IE最坑爹的事情是重複繫結事件後先後執行的順序。

除IE以外的瀏覽器重複繫結事件程式碼：

1. var okBtn = document.getElementById("okBtn");
2. okBtn.addEventListener("click",function(){
3.     alert(this.id);   //"okBtn"
4. },false);
5. okBtn.addEventListener("click",function(){
6.     alert("事件繫結2");   //""事件繫結2"
7. },false);

執行結果：先彈出了“okBtn”然後再彈出了“事件繫結2”

IE瀏覽器重複繫結事件程式碼：

1. var okBtn = document.getElementById("okBtn");
2. okBtn.attachEvent("onclick",function(){
3.     alert(this.id);   //"okBtn"
4. });
5. okBtn.attachEvent("onclick",function(){
6.     alert("事件繫結2");   //""事件繫結2"
7. });

執行結果：先彈出了“事件繫結2”然後再彈出了“okBtn”

這麼坑爹，這是為啥，說實在的我也不知道，這您要問微軟為啥？重複繫結一個事件，IE與其他瀏覽器執行先後不一致，這個問題大家一定要牢記，在IE9以下的瀏覽器中執行順序都是反著者的，因為IE9開始已經支援addEventListener()方法所以不會在有這個問題了。

今天要講的基本已經結束了，IE與其他瀏覽器事件重複繫結後執行順序的差異。最後把跨瀏覽器繫結事件程式碼總結下:

1. var $event = {
2.     on : function(element,type,handler){
3.         if(element.addEventListener){//判斷addEventListener函式方法是否存在
4.             element.addEventListener(type,handler,false);
5.         }else if(element.attachEvent){//判斷attachEvent函式方法是否存在
6.             element.attachEvent("on" + type,handler);
7.         }
8.     }
9. }

呼叫方法：

1. var okBtn = document.getElementById("okBtn");
2. $event.on(okBtn,"click",function(){
3.     alert("新方法");
4. });

經過封裝後的方法在IE各版本與chrome,firefox下都相容，大家可以測試一下