JS的事件綁定深入認(rèn)識
一、傳統(tǒng)事件模型
傳統(tǒng)事件模型中存在局限性。
內(nèi)聯(lián)模型以HTML標(biāo)簽屬性的形式使用,與HTML混寫,這種方式無疑造成了修改以及擴(kuò)展的問題,已經(jīng)很少使用了。
腳本模型是將事件處理函數(shù)寫到j(luò)s文件中,從頁面獲取元素進(jìn)行對應(yīng)事件函數(shù)的綁定以觸發(fā)執(zhí)行。但也存在不足之處:
1.一個(gè)事件綁定多個(gè)事件監(jiān)聽函數(shù),后者將覆蓋前者。
2.需要限制重復(fù)綁定的情況
3.標(biāo)準(zhǔn)化event對象
二、現(xiàn)代事件綁定
DOM2級事件定義了兩個(gè)方法用于添加、刪除事件:addEventListener()、removeEventListener().他們分別接收三個(gè)參數(shù):事件名、函數(shù)、冒泡或捕獲的布爾值(true表示捕獲,false表示冒泡)。
與之對應(yīng),IE提供了類似的兩個(gè)方法attachEvent()和 detachEvent(),但I(xiàn)E的兩個(gè)方法存在另外的問題:無法傳遞this對象(IE中的this指向window)可以使用call方法進(jìn)行對象冒充:
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ù),因此添加后無法進(jìn)行刪除;另外IE提供方法還會有無法順序執(zhí)行綁定事件、存在內(nèi)存泄漏的問題。
為了解決這一系列的問題,就有必要對方法進(jìn)行進(jìn)一步的封裝,對其他瀏覽器使用DOM2級標(biāo)準(zhǔn)進(jìn)行,對于IE,采用基于傳統(tǒng)模式的添加、刪除,思路為:
1.添加是使用JS的散列表存儲對象事件,為每一個(gè)對象事件分配一個(gè)ID值,按添加的調(diào)用順序,先判斷是否存在相同的處理函數(shù),不存在的話就依次將事件綁定函數(shù)添加到散列表中,這樣解決了無法順序執(zhí)行以及重復(fù)添加的問題
2.刪除時(shí)進(jìn)行遍歷函數(shù)匹配的判斷,存在則刪除
總結(jié):
之前對JS的事件綁定并沒有太深的認(rèn)識,甚至停留在傳統(tǒng)事件綁定模型上,對程序?qū)崿F(xiàn)上還是認(rèn)識太淺,這次學(xué)習(xí)封裝庫這部分內(nèi)容時(shí),才學(xué)習(xí)到很多JS上面向?qū)ο蟮膽?yīng)用。雖說類似于JQuery的這樣js庫已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果,但只知其然,不知其所以然還有會有種蒙在鼓里的感覺,親自去分析一下具體的實(shí)現(xiàn),會有一種豁然開朗的感覺,也體會到,做好一個(gè)兼容性、通用性強(qiáng)的程序更要考慮很多內(nèi)容,解決很多問題,也正在在這些問題中逐漸清楚很多的。
相關(guān)文章
詳解JavaScript中的before-after-hook鉤子函數(shù)
最近看別人的代碼,接觸到一個(gè)插件,before-after-hook,百度搜一圈也沒有看到什么地方有教程,本文就來簡單介紹一下這個(gè)插件的使用方法,需要的可以參考一下2022-12-12Nuxt3?布局layouts和NuxtLayout的使用詳解
layouts是Nuxt3提供的一種方便開發(fā)者快速實(shí)現(xiàn)自定義布局的約定,是基于Vue3的一個(gè)開發(fā)框架,基于服務(wù)器端渲染SSR,可以更加方便的用于Vue的SEO優(yōu)化,這篇文章主要介紹了Nuxt3?布局layouts和NuxtLayout的使用,需要的朋友可以參考下2023-04-04基于JavaScript實(shí)現(xiàn)div層跟隨滾動條滑動
項(xiàng)目需求是這樣的:在一個(gè)頁面放2個(gè)懸浮框,懸浮框隨頁面的上下滾動有上下波動的效果,最終固定在同一位置,下面通過本文給大家分享基于JavaScript實(shí)現(xiàn)div層跟隨滾動條滑動的相關(guān)資料,對js div跟隨滾動條滑動相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實(shí)例,具有很好的參考價(jià)值,一起跟隨小編過來看看吧,希望對大家有所幫助2017-11-11一個(gè)簡單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
頁面滾動條處于低端,點(diǎn)擊回到頂部,并且隱藏掉,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-06-06javascript中數(shù)組(Array)對象和字符串(String)對象的常用方法總結(jié)
這篇文章主要介紹了javascript中數(shù)組(Array)對象和字符串(String)對象的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript中關(guān)于數(shù)組和字符串的常用函數(shù)與使用技巧,需要的朋友可以參考下2016-12-12window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)
本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01