1.DOM 事件分三个阶段

  1. 捕获阶段：事件从window对象自上而下向目标节点传播的阶段（由外向内找监听函数）；
  2. 目标阶段：真正的目标节点正在处理事件的阶段；
  3. 冒泡阶段：事件从目标节点自下而上向window对象传播的阶段（由内向外找监听函数）。

  • 添加和删除事件写法：

    1. el.addEventListener('click',fn,bool) // W3C,bool为true捕获，为false冒泡(或什么都不写)
    2. el.removeEventListener('click',fn,bool)

  • 事件流图示（包含DOM事件的三个阶段）：

DOM 事件模型 - 图1

2.捕获与冒泡同时包含时如何执行

先捕获（由外到内）后冒泡（由内到外）
代码如下：

  1. <body>
  2.   <div id="el">
  3.     目标元素
  4.     <style>
  5.       #el{
  6.             width: 200px;
  7.             height: 100px;
  8.             background: red;
  9.           }
  10.     </style>
  11.   </div>
  12.   <script>
  13.     const el = document.getElementById('el')
  14.     el.addEventListener('click',(e)=>{
  15.       console.log('捕获内')
  16.     }, true)
  17.     document.body.addEventListener('click',(e)=>{
  18.       console.log('捕获外')
  19.     }, true)
  20.     document.body.addEventListener('click',(e)=>{
  21.       console.log('冒泡外')
  22.     })
  23.     el.addEventListener('click',(e)=>{
  24.       console.log('冒泡内')
  25.     })
  26.   </script>
  27. </body>

执行JS，点击目标元素，控制台显示如下：
image.png
注意：没有父子关系的情况下，没有冒泡或捕获一说，谁先监听，谁先执行

3.取消冒泡

捕获不能中断，但有些事件的冒泡可以取消（可搜索 事件名+event+MDN 查看冒泡是否可取消）
取消冒泡代码如下：

  1. e.stopPropagation() // 执行完当前事件停止冒泡