欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2014年06月26日 10:13:43   投稿:whsnow  
類似于JQuery的這樣js庫已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果,但只知其然,不知其所以然還有會有種蒙在鼓里的感覺,親自去分析一下具體的實(shí)現(xià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ù)

    詳解JavaScript中的before-after-hook鉤子函數(shù)

    最近看別人的代碼,接觸到一個(gè)插件,before-after-hook,百度搜一圈也沒有看到什么地方有教程,本文就來簡單介紹一下這個(gè)插件的使用方法,需要的可以參考一下
    2022-12-12
  • Nuxt3?布局layouts和NuxtLayout的使用詳解

    Nuxt3?布局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層跟隨滾動條滑動

    基于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-01
  • js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)

    js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)

    下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實(shí)例,具有很好的參考價(jià)值,一起跟隨小編過來看看吧,希望對大家有所幫助
    2017-11-11
  • JavaScript中常見的事件用法小結(jié)

    JavaScript中常見的事件用法小結(jié)

    這篇文章主要介紹了JavaScript中常見的事件用法小結(jié),需要的朋友可以參考下
    2023-05-05
  • js字符串分割處理的幾種方法(6種)

    js字符串分割處理的幾種方法(6種)

    本文主要介紹了js字符串分割處理的幾種方法,主要介紹了6種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • 一個(gè)簡單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹

    一個(gè)簡單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹

    頁面滾動條處于低端,點(diǎn)擊回到頂部,并且隱藏掉,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈
    2013-06-06
  • javascript中數(shù)組(Array)對象和字符串(String)對象的常用方法總結(jié)

    javascript中數(shù)組(Array)對象和字符串(String)對象的常用方法總結(jié)

    這篇文章主要介紹了javascript中數(shù)組(Array)對象和字符串(String)對象的常用方法,結(jié)合實(shí)例形式總結(jié)分析了javascript中關(guān)于數(shù)組和字符串的常用函數(shù)與使用技巧,需要的朋友可以參考下
    2016-12-12
  • ES6數(shù)組與對象的解構(gòu)賦值詳解

    ES6數(shù)組與對象的解構(gòu)賦值詳解

    這篇文章主要介紹了ES6數(shù)組與對象的解構(gòu)賦值,結(jié)合實(shí)例形式詳細(xì)分析了ES6中數(shù)組與對象的解構(gòu)賦值原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-06-06
  • window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)

    window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)

    本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01

最新評論