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ù):
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元素。
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
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)文章
微信小程序開發(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-08javascript實(shí)現(xiàn)加載xml文件的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)加載xml文件的方法,涉及JavaScript針對(duì)xml文件對(duì)象的相關(guān)加載與獲取操作實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏
這篇文章主要為大家介紹了ECharts實(shí)現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10javascript實(shí)現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個(gè)簡(jiǎn)單的實(shí)例告訴你如何來實(shí)例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦,有需要的同學(xué)可以參考一下本文章。2015-08-08