javacsript綁定事件的三種方式與各自特點javacsript綁定事件的三種方式與各自特點

  當javascript代碼偏少的時候，這種方式還能勉強接受。當代碼規模變大的時候，這種方式明顯地帶來很多不友善的東西。例如修改行為的時候還需要去修改html檔案，這不是我們想要看到的。我們希望html與javascript能夠分開維護，當修改行為的時候不要修改負責顯示的東西。是以就有了下面這個綁定事件的方式。

  在javascript代碼中（即< script >标簽内）綁定事件可以使javascript代碼與html标簽分離，文檔結構清晰，便于管理和開發。

  但是這種方式有個嚴重的問題，就是隻能為一個dom元素的一個事件綁定唯一一個事件處理程式，重複綁定會覆寫了第一個綁定的事件處理程式，如：

  以上代碼，單擊button隻會彈出2，第一個事件處理程式已經被覆寫了。而且在低版本的ie浏覽器裡面這種寫法很容易就會導緻dom與javascript對象的循環引用，導緻記憶體洩露。

  dom level 2的事件綁定機制可以讓我們把html和javascript代碼分開，也支援為一個dom的同一個事件綁定多個事件處理程式，基本滿足了我們對事件綁定的需求。由于ie這個奇葩不支援事件捕獲機制，是以要寫跨浏覽器的代碼，隻能使用冒泡來傳播事件哦！

  removeeventlistener() 是解綁利用addeventlistener() 綁定的事件，這裡有一點需要注意：addeventlistener()添加的事件隻能用removeeventlistener() 解綁，而且使用匿名函數的addeventlistener() 綁定的事件是沒辦法移除的。

<a href="http://dafeizizhu.github.io/2013/08/02/javascript-bind-event-handler/">三種原生javascript綁定事件方式對比</a>

<a href="http://www.itxueyuan.org/view/6338.html">javascript綁定事件的方法[3種]</a>