DOM 事件流详解

DOM 事件流是指从页面中接收事件、处理事件并响应事件的过程。它包含三个阶段：事件捕获、目标阶段和事件冒泡。

事件冒泡

事件冒泡指事件从 DOM 树中最深层的节点开始向父节点传递的过程，一直传递到最外层的节点（一般为window）。在事件冒泡的过程中，当事件触发时，先运行被点击元素的事件处理程序，然后向上层节点传递直到window。

以下是一个事件冒泡的示例：

<div id="outer" style="height:200px;border:1px solid;display: flex;justify-content: center;align-items: center;">
  <div id="inner" style="height:100px;width: 100px;background-color: rgba(0,255,0,0.5);"></div>
</div>

<script>
document.getElementById('inner').addEventListener(
  'click',
  function (event) {
    console.log('inner被点击了');
  }
);
document.getElementById('outer').addEventListener(
  'click',
  function (event) {
    console.log('outer被点击了');
  }
);
</script>

点击 #inner 区域，console.log 实现如下：

inner被点击了
outer被点击了

由此可见，事件从内部开始冒泡，先执行内部的 click 事件处理程序 function(){console.log('inner被点击了')}，后执行外部的 click 事件处理程序 function(){console.log('outer被点击了')}，即使内部事件执行了 event.stopPropagation() 方法，也不会阻止该事件执行完继续向上传播。

事件捕获

事件捕获是指事件从window节点开始传播，直到最深层的节点的过程。当目标节点触发事件，先将事件传播到window节点，层层向下传递至目标节点。在普通的dom事件中，事件捕获阶段不会触发任何事件的监听函数。

以下是一个事件捕获的示例：

<div id="outer" style="height:200px;border:1px solid;display: flex;justify-content: center;align-items: center;">
  <div id="inner" style="height:100px;width: 100px;background-color: rgba(0,255,0,0.5);"></div>
</div>

<script>
document.getElementById('inner').addEventListener(
  'click',
  function (event) {
    console.log('inner被点击了');
  },
  true // 设置为true表示在事件捕获阶段触发
);
document.getElementById('outer').addEventListener(
  'click',
  function (event) {
    console.log('outer被点击了');
  },
  true // 设置为true表示在事件捕获阶段触发
);
</script>

点击 #inner 区域，console.log 实现如下：

outer被点击了
inner被点击了

由此可见，在监听器中将事件进行了捕获，先执行外部的 click 事件处理程序 function(){console.log('outer被点击了')}，后执行内部的 click 事件处理程序 function(){console.log('inner被点击了')}

事件委托

事件委托是指将事件处理器附加到一个父级节点上，而不是每个子节点上，以获得更好的性能和可维护性。在事件冒泡期间，监听器会检查事件源，并确定该事件是否来自子元素，然后运行相应的事件处理器。

以下是一个事件委托的示例：

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function (event) {
  console.log(event.target.innerHTML + '被点击了');
});
</script>

点击 li 标签，console.log 实现如下：

1被点击了
2被点击了
3被点击了

由此可见，通过在父元素上监听事件，尽管使用了委托，每个子元素仍然可以响应事件，从而实现了性能和可维护性的提高。

以上为DOM 事件流详解的完整攻略，希望可以帮助您更好地理解DOM 事件流机制。