JS傳播事件、取消事件默認(rèn)行為、阻止事件傳播詳解
1.事件處理程序的返回值
通常情況下,返回值false就是告訴瀏覽器不要執(zhí)行這個(gè)事件相關(guān)的默認(rèn)操作。例如,表單提交按鈕的onclick事件處理程序能通過(guò)返回false阻止瀏覽器提交表單,再如a標(biāo)簽的onclick事件處理程序通過(guò)返回false阻止跳轉(zhuǎn)href頁(yè)面。類似地,如果用戶輸入不合適的字符,輸入域上的onkeypress事件處理程序能通過(guò)返回false來(lái)過(guò)濾鍵盤(pán)輸入。
事件處理程序的返回值只對(duì)通過(guò)屬性注冊(cè)的處理程序才有意義。
2.調(diào)用順序
文檔元素或其他對(duì)象可以為指定事件類型注冊(cè)多個(gè)事件處理程序。當(dāng)適當(dāng)?shù)氖录l(fā)生時(shí),瀏覽器必須按照如下規(guī)則調(diào)用所有的事件處理程序:
通過(guò)設(shè)置對(duì)象屬性或HTML屬性注冊(cè)的處理程序一直優(yōu)先調(diào)用。
使用addEventListener()注冊(cè)的處理程序按照它們的注冊(cè)順序調(diào)用。
使用attachEvent()注冊(cè)的處理程序可能按照任何順序調(diào)用,所以代碼不應(yīng)該依賴于調(diào)用順序
3.事件傳播
在調(diào)用在目標(biāo)元素上注冊(cè)的事件處理函數(shù)后,大部分事件會(huì)“冒泡”到DOM樹(shù)根。調(diào)用目標(biāo)的父元素的事件處理程序,然后調(diào)用在目標(biāo)的祖父元素上注冊(cè)的事件處理程序。這會(huì)一直到Document對(duì)象,最后到達(dá)Window對(duì)象。
發(fā)生在文檔元素上的大部分事件都會(huì)冒泡,值得注意的例外是focus、blur和scroll事件。文檔元素的load事件會(huì)冒泡,但它會(huì)在Document對(duì)象上停止冒泡而不會(huì)傳播到Window對(duì)象。只有當(dāng)整個(gè)文檔都加載完畢時(shí)才會(huì)觸發(fā)Window對(duì)象的load事件。
4.取消事件默認(rèn)行為、阻止事件傳播
在支持addEventListener()的瀏覽器中,可以通過(guò)調(diào)用事件對(duì)象的preventDefault()方法取消事件的默認(rèn)操作。IE9之前的IE中,可以通過(guò)設(shè)置事件對(duì)象的returnValue屬性為false達(dá)到同樣的效果。下面一段代碼是結(jié)合三種技術(shù)取消事件:
function cancelHandler(event){
var event=event||window.event;//兼容IE
//取消事件相關(guān)的默認(rèn)行為
if(event.preventDefault) //標(biāo)準(zhǔn)技術(shù)
event.preventDefault();
if(event.returnValue) //兼容IE9之前的IE
event.returnValue=false;
return false; //用于處理使用對(duì)象屬性注冊(cè)的處理程序
}
取消事件相關(guān)的默認(rèn)操作只是事件取消中的一種,我們也能取消事件傳播。在支持addEventListener()的瀏覽器中,可以調(diào)用事件對(duì)象的stopPropagation()方法以阻止事件的繼續(xù)傳播。如果在同一對(duì)象上定義了其他處理程序,剩下的處理程序?qū)⒁琅f被調(diào)用,但調(diào)用stopPropagation()之后任何其他對(duì)象上的事件處理程序?qū)⒉粫?huì)被調(diào)用。
IE9之前的IE不支持stopPropagation()方法,而是設(shè)置事件對(duì)象cancelBubble屬性為true來(lái)實(shí)現(xiàn)阻止事件進(jìn)一步傳播。
好了以上就是小編為大家整理的全部?jī)?nèi)容啦,希望對(duì)大家有所幫助~
相關(guān)文章
nodejs中exports與module.exports的區(qū)別詳細(xì)介紹
你肯定非常熟悉nodejs模塊中的exports對(duì)象,你可以用它創(chuàng)建你的模塊接下來(lái)介紹創(chuàng)建過(guò)程,感興趣的朋友可以參考下2013-01-01
JavaScript中各數(shù)制轉(zhuǎn)換全面總結(jié)
這篇文章主要介紹了JavaScript中各數(shù)制轉(zhuǎn)換,利用toString的基模式來(lái)進(jìn)行轉(zhuǎn)換,對(duì)數(shù)字調(diào)用 toString(10) 與調(diào)用 toString() 它們返回的區(qū)別和相同之處等等都在本文中提及,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記4 js運(yùn)算符和操作符
如果說(shuō)數(shù)據(jù)類型是編程語(yǔ)言的磚瓦,那么運(yùn)算符和操作符則是編程語(yǔ)言的石灰和水泥了,它是將各種數(shù)據(jù)類型的值有機(jī)組合的糅合劑,使得數(shù)據(jù)值不再只是一個(gè)孤立的值,而有了一種動(dòng)態(tài)的靈性2012-10-10
JavaScript中匿名、命名函數(shù)的性能測(cè)試
這篇文章主要介紹了JavaScript中匿名、命名函數(shù)的性能測(cè)試,簡(jiǎn)單來(lái)講匿名即沒(méi)有名字的函數(shù),它和命名函數(shù)相比性能如何呢,本文即是對(duì)它們性能的測(cè)試,需要的朋友可以參考下2014-09-09
Javascript學(xué)習(xí)筆記2 函數(shù)
在Javascript中,function才是Javascript的第一型。當(dāng)我們寫(xiě)下一段函數(shù)時(shí),其實(shí)不過(guò)是建立了一個(gè)function類型的實(shí)體。2010-01-01
探討JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值
這篇文章的主要介紹了JavaScript中的Rest參數(shù)和參數(shù)默認(rèn)值,內(nèi)容很充實(shí),需要了解的朋友可以參考下2015-07-07

