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;
          }