亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript Event學(xué)習(xí)第五章 高級(jí)事件注冊(cè)模型

 更新時(shí)間:2010年02月07日 10:39:31   作者:  
在這一章我會(huì)講解兩種高級(jí)時(shí)間注冊(cè)模型:W3C和微軟的。因?yàn)檫@兩個(gè)方法都不能跨瀏覽器,所以在現(xiàn)在看來他們的使用場(chǎng)合并不多。
W3C和微軟都著力于發(fā)展自己的事件注冊(cè)模型來取代Netscape的傳統(tǒng)模型。雖然對(duì)于微軟的模型我不是很感冒,但是w3c的還是不錯(cuò)的,除了這個(gè)鼠標(biāo)定位 的問題。不過現(xiàn)在只有小部分瀏覽器支持。
W3C
W3C的DOM層面事件規(guī)范注意到了傳統(tǒng)模式的問題。他對(duì)于你想在一個(gè)元素上綁定多個(gè)事件提供了一個(gè)很好的解決辦法。
W3C事件注冊(cè)模型的關(guān)鍵就是addEventListener()。你給他三個(gè)參數(shù):事件類型,要執(zhí)行的函數(shù)和一個(gè)布爾值(true或者false)我一會(huì)再解釋。把我們熟知的doSomething()函數(shù)注冊(cè)到一個(gè)元素的onclick事件上,你可以這樣做:
element.addEventListener('click',doSomething,false)
這種模型的魅力在于我們可以想加多少監(jiān)聽就可以加多少。如果用我們之前的傳統(tǒng)模式里面的例子,我們就可以寫成這樣:
element.addEventListener('click',startDragDrop,false)
element.addEventListener('click',spyOnUser,false)
當(dāng)用戶點(diǎn)擊元素的時(shí)候兩個(gè)事件處理程序都會(huì)執(zhí)行。需要注意的是W3C標(biāo)準(zhǔn)不能確定哪個(gè)事件先執(zhí)行。所以你也不能認(rèn)為startDragDrop()就在spyOnUser()之前執(zhí)行。
移除事件處理程序也是非常的簡(jiǎn)單,用removeEventListener()就行了。所以:
element.removeEventListener('click',spyOnUser,false)
就會(huì)移除第二個(gè)事件處理程序但是第一個(gè)不會(huì)發(fā)生變化。非常漂亮的程序,完全解決了傳統(tǒng)模式下的問題。

匿名函數(shù)
在W3C模式下你依然可以使用匿名函數(shù):
復(fù)制代碼 代碼如下:

element.addEventListener('click',function () {
this.style.backgroundColor = '#cc0000'
},false)

true或者false
true或者false是addEventListener的最后一個(gè)參數(shù),意思是你想讓你的函數(shù)在捕獲階段還是冒泡階段執(zhí)行。如果你不確定,那就使用false(冒泡階段)。
this
在JavaScript里this關(guān)鍵字通常指函數(shù)的所有者。如果this指向事件發(fā)生的HTML元素,那么一切都是那么的美好,你可以很簡(jiǎn)單的做很多事情。
不幸的是,雖然this非常的強(qiáng)大,但是如果你不是明確的知道他怎么運(yùn)作的話使用起來還是比較難的。關(guān)于這個(gè)我在另一個(gè)地方有詳細(xì)的討論。
在w3c模型下他的運(yùn)作和在傳統(tǒng)模式下是一樣的:他表示現(xiàn)在正在處理事件的HTML元素。
復(fù)制代碼 代碼如下:

element.addEventListener('click',doSomething,false);
another_element.addEventListener('click',doSomething,false);
function doSomething() {
this.style.backgroundColor = '#cc0000';
}

如果你把doSomething()注冊(cè)在任意一個(gè)HTML元素的click實(shí)踐上,那么當(dāng)用戶點(diǎn)擊的時(shí)候這個(gè)元素的背景就會(huì)變成紅色。

哪個(gè)事件處理程序被注冊(cè)了呢?
現(xiàn)在這個(gè)W3C事件注冊(cè)模式有一個(gè)問題就是你不知道一個(gè)元素都有哪些事件處理程序被注冊(cè)了。在傳統(tǒng)模式下面你可以:
alert(element.onclick)
你就可以看到哪些函數(shù)注冊(cè)了,undefined就是沒有函數(shù)注冊(cè)在這個(gè)事件上。只是在最近的DOM Level 3事件中W3C才添加了一個(gè)eventListenerList來存儲(chǔ)已經(jīng)注冊(cè)了的事件處理程序。因?yàn)樘铝?,鮮有瀏覽器支持。然而,問題已經(jīng)解決了。
還好的是removeEventListener()不會(huì)因?yàn)槟銢]有注冊(cè)元素的某個(gè)事件而返回錯(cuò)誤,所以你可以不用擔(dān)心的使用removeEventLister()。
微軟
微軟也有一個(gè)事件注冊(cè)模型。跟W3C的很像,但是有一個(gè)嚴(yán)重的缺陷。
注冊(cè)一個(gè)事件處理程序,attach到一個(gè)元素:
element.attachEvent('onclick',doSomething)
或者,你需要兩個(gè)事件處理程序:
element.attachEvent('onclick',startDragDrop)
element.attachEvent('onclick',spyOnUser)
移除一個(gè)也非常簡(jiǎn)單:
element.detachEvent('onclick',spyOnUser)

缺陷
跟W3C的相比較,微軟有兩個(gè)嚴(yán)重的問題:
、事件總是冒泡,沒有被捕捉的可能。
、事件處理程序是被引用的,而不是拷貝的,所以this關(guān)鍵字總是指向window然后就一點(diǎn)用都沒有。
這兩個(gè)問題的結(jié)果就是如果一個(gè)事件冒泡了那么你是沒有可能知道哪個(gè)元素在處理事件。在后面的事件順序一章我會(huì)詳細(xì)的解釋。
而且微軟的標(biāo)準(zhǔn)只被IE支持,也不能用來跨瀏覽器。就算你只是給windows瀏覽器寫腳本也最好別用,因?yàn)槊芭輪栴}會(huì)讓事情變得不可收拾。
繼續(xù)
如果你想繼續(xù)學(xué)習(xí),請(qǐng)看下一章。
原文地址:http://www.quirksmode.org/js/events_advanced.html
第一次翻譯 大家多多包含 我的twitter:@rehawk

相關(guān)文章

  • 老生常談原生JS執(zhí)行環(huán)境與作用域

    老生常談原生JS執(zhí)行環(huán)境與作用域

    下面小編就為大家?guī)硪黄仙U勗鶭S執(zhí)行環(huán)境與作用域。小編覺得挺不錯(cuò)的,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-11-11
  • 微信小程序開發(fā)實(shí)現(xiàn)首頁(yè)彈框活動(dòng)引導(dǎo)功能

    微信小程序開發(fā)實(shí)現(xiàn)首頁(yè)彈框活動(dòng)引導(dǎo)功能

    自己x實(shí)現(xiàn)的一個(gè)比較簡(jiǎn)單微信彈窗功能,主要就是教會(huì)大家對(duì)微信彈窗的用法和理解,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)首頁(yè)彈框活動(dòng)引導(dǎo)功能的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • js 性能優(yōu)化之快速響應(yīng)的用戶界面

    js 性能優(yōu)化之快速響應(yīng)的用戶界面

    本文主要介紹了js性能優(yōu)化的快速響應(yīng)的用戶界面。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • javascript獲取作用在元素上面的樣式屬性代碼

    javascript獲取作用在元素上面的樣式屬性代碼

    遍歷所有樣式屬性,通過判斷其屬性值,是否為'undefined' 或特特的值,來過慮屬性
    2012-09-09
  • JavaScript單鏈表詳解與實(shí)現(xiàn)

    JavaScript單鏈表詳解與實(shí)現(xiàn)

    鏈表是一種數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)和組織一系列元素,這些元素以節(jié)點(diǎn)的形式連接在一起,每個(gè)節(jié)點(diǎn)包含數(shù)據(jù)和一個(gè)指向下一個(gè)節(jié)點(diǎn)的引用,鏈表可以分為單鏈表、雙鏈表和循環(huán)鏈表等不同類型,但在本文中,我們將重點(diǎn)關(guān)注單鏈表,需要的朋友可以參考下
    2023-09-09
  • javascript實(shí)現(xiàn)加載xml文件的方法

    javascript實(shí)現(xiàn)加載xml文件的方法

    這篇文章主要介紹了javascript實(shí)現(xiàn)加載xml文件的方法,涉及JavaScript針對(duì)xml文件對(duì)象的相關(guān)加載與獲取操作實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏

    ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏

    這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-10-10
  • JavaScript類繼承及實(shí)例化的方法

    JavaScript類繼承及實(shí)例化的方法

    這篇文章主要介紹了JavaScript類繼承及實(shí)例化的方法,較為詳細(xì)的分析了javascript擴(kuò)展類、實(shí)例化類及類對(duì)象與成員函數(shù)的使用技巧,需要的朋友可以參考下
    2015-07-07
  • javascript實(shí)現(xiàn)顯示和隱藏div方法匯總

    javascript實(shí)現(xiàn)顯示和隱藏div方法匯總

    本文章通過幾個(gè)簡(jiǎn)單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦,有需要的同學(xué)可以參考一下本文章。
    2015-08-08
  • layui 監(jiān)聽表格復(fù)選框選中值的方法

    layui 監(jiān)聽表格復(fù)選框選中值的方法

    今天小編就為大家分享一篇layui 監(jiān)聽表格復(fù)選框選中值的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評(píng)論