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來實現阻止事件進一步傳播。

 

  來源於《JavaScript權威指南》 17.3.4