快捷導(dǎo)航

JS的事件綁定深入認(rèn)識(shí)

更新時(shí)間：2014年06月26日 10:13:43 投稿：whsnow

類(lèi)似于JQuery的這樣js庫(kù)已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果，但只知其然，不知其所以然還有會(huì)有種蒙在鼓里的感覺(jué)，親自去分析一下具體的實(shí)現(xiàn)，會(huì)有一種豁然開(kāi)朗的感覺(jué)

一、傳統(tǒng)事件模型

傳統(tǒng)事件模型中存在局限性。

內(nèi)聯(lián)模型以HTML標(biāo)簽屬性的形式使用，與HTML混寫(xiě)，這種方式無(wú)疑造成了修改以及擴(kuò)展的問(wèn)題，已經(jīng)很少使用了。

腳本模型是將事件處理函數(shù)寫(xiě)到j(luò)s文件中，從頁(yè)面獲取元素進(jìn)行對(duì)應(yīng)事件函數(shù)的綁定以觸發(fā)執(zhí)行。但也存在不足之處：

1.一個(gè)事件綁定多個(gè)事件監(jiān)聽(tīng)函數(shù)，后者將覆蓋前者。

2.需要限制重復(fù)綁定的情況

3.標(biāo)準(zhǔn)化event對(duì)象

二、現(xiàn)代事件綁定

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

與之對(duì)應(yīng)，IE提供了類(lèi)似的兩個(gè)方法attachEvent()和 detachEvent()，但I(xiàn)E的兩個(gè)方法存在另外的問(wèn)題：無(wú)法傳遞this對(duì)象（IE中的this指向window）可以使用call方法進(jìn)行對(duì)象冒充:

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); 
}); 
} 
};

但由于添加時(shí)執(zhí)行的是匿名函數(shù)，因此添加后無(wú)法進(jìn)行刪除；另外IE提供方法還會(huì)有無(wú)法順序執(zhí)行綁定事件、存在內(nèi)存泄漏的問(wèn)題。

為了解決這一系列的問(wèn)題，就有必要對(duì)方法進(jìn)行進(jìn)一步的封裝，對(duì)其他瀏覽器使用DOM2級(jí)標(biāo)準(zhǔn)進(jìn)行，對(duì)于IE，采用基于傳統(tǒng)模式的添加、刪除，思路為：

1.添加是使用JS的散列表存儲(chǔ)對(duì)象事件，為每一個(gè)對(duì)象事件分配一個(gè)ID值，按添加的調(diào)用順序，先判斷是否存在相同的處理函數(shù)，不存在的話就依次將事件綁定函數(shù)添加到散列表中，這樣解決了無(wú)法順序執(zhí)行以及重復(fù)添加的問(wèn)題

2.刪除時(shí)進(jìn)行遍歷函數(shù)匹配的判斷，存在則刪除

總結(jié)：

之前對(duì)JS的事件綁定并沒(méi)有太深的認(rèn)識(shí)，甚至停留在傳統(tǒng)事件綁定模型上，對(duì)程序?qū)崿F(xiàn)上還是認(rèn)識(shí)太淺，這次學(xué)習(xí)封裝庫(kù)這部分內(nèi)容時(shí)，才學(xué)習(xí)到很多JS上面向?qū)ο蟮膽?yīng)用。雖說(shuō)類(lèi)似于JQuery的這樣js庫(kù)已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果，但只知其然，不知其所以然還有會(huì)有種蒙在鼓里的感覺(jué)，親自去分析一下具體的實(shí)現(xiàn)，會(huì)有一種豁然開(kāi)朗的感覺(jué)，也體會(huì)到，做好一個(gè)兼容性、通用性強(qiáng)的程序更要考慮很多內(nèi)容，解決很多問(wèn)題，也正在在這些問(wèn)題中逐漸清楚很多的。

您可能感興趣的文章: