BOM之事件相關

事件

• 事件：瀏覽器自動觸發的或用戶手動觸發的對象狀態的改變
• 事件處理函數：當事件發生時，自動執行的函數對象
• 如何綁定事件處理函數：3種
  
  • 在JS動態綁定事件處理函數：elem.事件名 = 函數對象
    
    • 問題1：同一元素的同一事件處理函數，只能綁定一個函數對象
    • 問題2：無法修改事件觸發的順序
  • 在JS中動態綁定事件處理函數，可同時綁定多個，可修改事件觸發順序
    
    • DOM標準：elem.addEventListener(“事件名”,函數對象,是否在捕獲階段觸發)
    • IE8：elem.attachEvent(“on事件名”,函數對象)
• 事件週期：從事件觸發到各級事件執行完的全過程
  
  • DOM標準：3個階段
    
    1. (從根開始，由外向內，到目標元素)捕獲
    2. (實際觸發事件的對象)目標觸發
    3. (由目標向外，到根結束)冒泡觸發
  • IE8：2個階段
    
    1. (實際觸發事件的對象)目標觸發
    2. (由目標向外，到根結束)冒泡觸發
  • 是否可修改事件執行順序：可以
    
    • 修改addEventLister的第三個參數爲true，可在捕獲階段提前觸發，同一事件不可觸發兩次
• 事件對象：當事件發生時，自動創建的封裝事件信息的對象
  
  • 獲得事件對象：
    
    1. 在html中綁定事件處理函數：在html中顯式使用event，兼容性最好
       
    2. 在JS中動態綁定事件處理函數
       
       • DOM標準：事件對象作爲事件處理函數的第一個參數，傳入函數中
         
         • arguments[0] —— 事件對象
       • IE8：事件對象是windows下的一個全局屬性：window.event
       • 兼容性寫法： var e = window.event||arguments[0]
• 固定套路
  
  • 取消冒泡：在當前事件處理函數執行結尾，阻止繼續向上冒泡
    
    • DOM：e.stopPropagation();
    • IE8：e.cancelBubble = true
    • 兼容性代碼：if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble=true }
  • 利用冒泡：
    
    • 優化：多個子元素，定義了相同的事件處理函數，其實只需要將事件處理函數在父元素上定義一次即可
    • why：每個處理函數綁定的都是一個對象，處理函數綁定得越多，網頁的執行效率就越低。減少處理函數綁定的次數，可提高執行效率。
    • 獲得目標元素： var target = e.srcElement||e.target
    • 目標元素 vs this
      
      • this：會隨時間冒泡而改變
      • 目標元素，不受冒泡影響，始終保存最初的目標元素對象
  • 取消事件：事件執行過程中，發生異常狀況，可阻止事件觸發
    
    • 如onsubmit：自動提交之前觸發，如果驗證未通過，可取消繼續提交
    • 何時使用：取消元素默認的事件行爲
      
      • 在html中綁定事件處理函數：2個return
        
        • valiAll(){ return true/false; }
      • 在JS中動態綁定處理函數
        
        • 如何取消：if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false }
• 事件座標：3種
  
  • 相對於顯示器左上角：
    
    • 最大值：screen.availWidth/Height
    • 鼠標位置：e.screenX/Y
  • 相對於文檔顯示區左上角：
    
    • 最大值：window.innerWidth/Height
    • 鼠標位置：e.clientX/Y
  • 相對於父元素左上角：
    
    • 最大值：父元素的寬和高
    • 鼠標位置：e.offsetX/Y
• 頁面滾動
  
  • 事件：window.onscroll
  • document.documentElement.scrollTop
  • document.body.scrollTop