JS的事件綁定深入認識

一、傳統事件模型

傳統事件模型中存在局限性。

內聯模型以HTML標籤屬性的形式使用，與HTML混寫，這種方式無疑造成了修改以及擴充的問題，已經很少使用了。

指令碼模型是將事件處理函數寫到js檔案中，從頁面擷取元素進行對應事件函數的綁定以觸發執行。但也存在不足之處：

1.一個事件綁定多個事件監聽函數，後者將覆蓋前者。

2.需要限制重複綁定的情況

3.標準化event對象

二、現代事件綁定

DOM2級事件定義了兩個方法用於添加、刪除事件：addEventListener()、removeEventListener().他們分別接收三個參數：事件名、函數、冒泡或捕獲的布爾值（true表示捕獲，false表示冒泡）。

與之對應，IE提供了類似的兩個方法attachEvent()和 detachEvent()，但IE的兩個方法存在另外的問題：無法傳遞this對象（IE中的this指向window）可以使用call方法進行對象冒充:

function addEvent(obj,type,fn){ if(typeof obj.addEventListener != 'undefined'){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent != 'undefined'){ obj.attachEvent('on' + type,function(){ fn.call(obj,window.event); }); } };

但由於添加時執行的是匿名函數，因此添加後無法進行刪除；另外IE提供方法還會有無法順序執行綁定事件、存在記憶體流失的問題。

為瞭解決這一系列的問題，就有必要對方法進行進一步的封裝，對其他瀏覽器使用DOM2級標準進行，對於IE，採用基於傳統模式的添加、刪除，思路為：

1.添加是使用JS的散列表格儲存體對象事件，為每一個對象事件分配一個ID值，按添加的調用順序，先判斷是否存在相同的處理函數，不存在的話就依次將事件綁定函數添加到散列表中，這樣解決了無法順序執行以及重複添加的問題

2.刪除時進行遍曆函數匹配的判斷，存在則刪除

總結：

之前對JS的事件綁定並沒有太深的認識，甚至停留在傳統事件綁定模型上，對程式實現上還是認識太淺，這次學習封裝庫這部分內容時，才學習到很多JS上物件導向的應用。雖說類似於JQuery的這樣js庫已經實現了很好的資料繫結機制的封裝效果，但只知其然，不知其所以然還有會有種蒙在鼓裡的感覺，親自去分析一下具體的實現，會有一種豁然開朗的感覺，也體會到，做好一個相容性、通用性強的程式更要考慮很多內容，解決很多問題，也正在在這些問題中逐漸清楚很多的。