技術標籤：javascript前端

JavaScript 事件處理模型 （冒泡&捕獲）

1.事件處理流程

• DOM 結構： html --> body --> div(事件繫結物件)

2. 事件捕獲階段

• 獲取事件觸發物件： html -> body -> div(事件繫結物件)

3.事件冒泡階段

• 從下至上依次冒泡： div(事件繫結物件) -> body -> html

4.事件處理程式執行位置

• 預設事件處理程式在冒泡階段執行
• 可通過 ele.addEventListener 的第三個引數來控制
  • 引數預設為 false ，表示事件處理程式在事件冒泡階段執行，如果引數為 true，則事件處理程式在捕獲階段執行，並且將沒有事件冒泡階段

5.阻止事件冒泡

• 通過 e.stopPropagation 阻止事件冒泡

     if (e) {
       // 阻止事件冒泡
       e.stopPropagation();
       // 阻止元素預設行為
       e.preventDefault();
     } else {
       window.event.returnValue = false;
       window.event.cancelBubble = true;
     }
  
  

6.總結

• 事件處理流程
  • 事件捕獲階段 html -> body -> div
  • 事件冒泡階段 div -> body -> html
• 事件處理程式位置
  • 預設在事件冒泡階段執行
  • 可通過 addEventListener 的第三個引數設定
    • 預設： false 事件處理程式在冒泡階段執行
    • true 事件處理程式在事件捕獲階段執行 設定了這個， 後面就沒有冒泡過程了
• 阻止事件冒泡
  • 通過 e.stopPropagation 阻止事件冒泡
  • e.stopPropagation()
  • 程式碼：

    
          if (e) {
           // 阻止事件冒泡
            e.stopPropagation();
            // 阻止元素預設行為
            e.preventDefault();
          } else {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
          }