首頁 > web前端 > js教程 > JS中事件的詳細解答(圖文教學)

JS中事件的詳細解答(圖文教學)

亚连
發布: 2018-05-19 10:06:28
原創
1485 人瀏覽過

這篇文章主要介紹了JS傳播事件、取消事件預設行為、阻止事件傳播,透過事件處理程序的回傳值呼叫順序講解了詳細的過程,需要的朋友可以參考下

1.事件處理程序的回傳值 

      通常情況下,回傳值false是告訴瀏覽器不要執行此事件相關的預設操作。例如,表單提交按鈕的onclick事件處理程序能透過返回false阻止瀏覽器提交表單,再如a標籤的onclick事件處理程序透過返回false阻止跳轉href頁面。類似地,如果使用者輸入不合適的字符,輸入域上的onkeypress事件處理程序能透過返回false來過濾鍵盤輸入。 
      事件處理程序的回傳值只對透過屬性註冊的處理程序才有意義。

2.呼叫順序

      文檔元素或其他物件可以為指定事件類型註冊多個事件處理程序。當適當的事件發生時,瀏覽器必須依照下列規則呼叫所有的事件處理程序:

透過設定物件屬性或HTML屬性註冊的處理程序一直優先呼叫。
使用addEventListener()註冊的處理程序依照它們的註冊順序呼叫。
使用attachEvent()註冊的處理程序可能會按照任何順序調用,所以程式碼不應該依賴調用順序

3.事件傳播

  在呼叫在目標元素上註冊的事件處理函數後,大部分事件會「冒泡」到DOM樹根。呼叫目標的父元素的事件處理程序,然後呼叫在目標的祖父元素上註冊的事件處理程序。這會一直到Document對象,最後到達Window對象。

  發生在文件元素上的大部分事件都會冒泡,值得注意的例外是focus、blur和scroll事件。文檔元素的load事件會冒泡,但它會在Document物件上停止冒泡而不會傳播到Window物件。只有當整個文件都載入完畢時才會觸發Window物件的load事件。

4.取消事件預設行為、阻止事件傳播

      在支援addEventListener()的瀏覽器中,可以透過呼叫事件物件的preventDefault()方法取消事件的預設操作。在IE9之前的IE中,可以透過設定事件物件的returnValue屬性為false達到相同的效果。以下一段程式碼是結合三種技術取消事件:


function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}
登入後複製


#取消事件相關的預設操作只是事件取消中的一種,我們也能取消事件傳播。在支援addEventListener()的瀏覽器中,可以呼叫事件物件的stopPropagation()方法以阻止事件的繼續傳播。如果在同一物件上定義了其他處理程序,則剩下的處理程序將依舊被調用,但調用stopPropagation()之後任何其他物件上的事件處理程序將不會被調用。

 IE9之前的IE不支援stopPropagation()方法,而是設定事件物件cancelBubble屬性為true來實現阻止事件進一步傳播。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

js 判斷客戶端能否上網詳解

動態運算js/css檔案有哪些方法

在vue專案中使用sass的設定方法_vue.js


#

以上是JS中事件的詳細解答(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板