首頁 > web前端 > js教程 > 主體

JS的事件綁定深入認識_javascript技巧

WBOY
發布: 2016-05-16 16:43:02
原創
1049 人瀏覽過

一、傳統事件模型

傳統事件模型中存在限制。

內嵌模型以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函式庫已經實現了很好的資料綁定機制的封裝效果,但只知其然,不知其所以然還有會有種蒙在鼓裡的感覺,親自去分析一下具體的實現,會有一種豁然開朗的感覺,也體會到,做好一個兼容性、通用性強的程序更要考慮很多內容,解決很多問題,也正在在這些問題中逐漸清楚很多的。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!