JS傳播事件、取消事件默認(rèn)行為、阻止事件傳播詳解
1.事件處理程序的返回值
通常情況下,返回值false就是告訴瀏覽器不要執(zhí)行這個事件相關(guān)的默認(rèn)操作。例如,表單提交按鈕的onclick事件處理程序能通過返回false阻止瀏覽器提交表單,再如a標(biāo)簽的onclick事件處理程序通過返回false阻止跳轉(zhuǎn)href頁面。類似地,如果用戶輸入不合適的字符,輸入域上的onkeypress事件處理程序能通過返回false來過濾鍵盤輸入。
事件處理程序的返回值只對通過屬性注冊的處理程序才有意義。
2.調(diào)用順序
文檔元素或其他對象可以為指定事件類型注冊多個事件處理程序。當(dāng)適當(dāng)?shù)氖录l(fā)生時,瀏覽器必須按照如下規(guī)則調(diào)用所有的事件處理程序:
通過設(shè)置對象屬性或HTML屬性注冊的處理程序一直優(yōu)先調(diào)用。
使用addEventListener()注冊的處理程序按照它們的注冊順序調(diào)用。
使用attachEvent()注冊的處理程序可能按照任何順序調(diào)用,所以代碼不應(yīng)該依賴于調(diào)用順序
3.事件傳播
在調(diào)用在目標(biāo)元素上注冊的事件處理函數(shù)后,大部分事件會“冒泡”到DOM樹根。調(diào)用目標(biāo)的父元素的事件處理程序,然后調(diào)用在目標(biāo)的祖父元素上注冊的事件處理程序。這會一直到Document對象,最后到達(dá)Window對象。
發(fā)生在文檔元素上的大部分事件都會冒泡,值得注意的例外是focus、blur和scroll事件。文檔元素的load事件會冒泡,但它會在Document對象上停止冒泡而不會傳播到Window對象。只有當(dāng)整個文檔都加載完畢時才會觸發(fā)Window對象的load事件。
4.取消事件默認(rèn)行為、阻止事件傳播
在支持addEventListener()的瀏覽器中,可以通過調(diào)用事件對象的preventDefault()方法取消事件的默認(rèn)操作。IE9之前的IE中,可以通過設(shè)置事件對象的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; //用于處理使用對象屬性注冊的處理程序 }
取消事件相關(guān)的默認(rèn)操作只是事件取消中的一種,我們也能取消事件傳播。在支持addEventListener()的瀏覽器中,可以調(diào)用事件對象的stopPropagation()方法以阻止事件的繼續(xù)傳播。如果在同一對象上定義了其他處理程序,剩下的處理程序?qū)⒁琅f被調(diào)用,但調(diào)用stopPropagation()之后任何其他對象上的事件處理程序?qū)⒉粫徽{(diào)用。
IE9之前的IE不支持stopPropagation()方法,而是設(shè)置事件對象cancelBubble屬性為true來實(shí)現(xiàn)阻止事件進(jìn)一步傳播。
好了以上就是小編為大家整理的全部內(nèi)容啦,希望對大家有所幫助~
相關(guān)文章
使用Math.floor與Math.random取隨機(jī)整數(shù)的方法詳解
本篇文章對使用Math.floor與Math.random取隨機(jī)整數(shù)的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05Javascript基礎(chǔ)教程之定義和調(diào)用函數(shù)
這篇文章主要介紹了Javascript基礎(chǔ)教程之定義和調(diào)用函數(shù)的相關(guān)資料,需要的朋友可以參考下2015-01-01