【前端知识点】事件流，事件委托，事件截断详解

事件流

事件触发包含三个阶段：捕获阶段、目标阶段和冒泡阶段，也被称为事件流。

• 捕获阶段：事件从window对象传导到事件目标，从最外层的祖先元素开始往下传递，直到达到事件目标元素，即事件传播到目标元素的父级元素时停止传播。捕获阶段的主要作用是为了在事件到达目标元素之前捕获到事件，常用于在事件到达目标元素之前对事件做出拦截或处理。
• 目标阶段：事件到达目标元素时触发，即事件到达目标元素的最内层的祖先元素时停止传播。
• 冒泡阶段：事件从目标元素传导回 window 对象，从目标元素开始往上冒泡，直到达到 document 对象或 window 对象为止。冒泡阶段的主要作用是让事件处理器可以在目标元素之外的元素上对事件做出响应。

一般情况下，事件处理器会在目标阶段或者冒泡阶段进行处理。如果想要在捕获阶段处理事件，需要在添加事件监听器时，将useCapture参数设置为true。

• 例如：

  document.addEventListener('click', function() {
    console.log('冒泡阶段处理事件');
  });
  
  document.addEventListener('click', function() {
    console.log('捕获阶段处理事件');
  }, true);
  
  

事件委托

事件委托是一种常用的优化前端事件处理的技术。在事件委托中，不是在每个子元素上单独添加事件监听器，而是将事件监听器添加到它们的父元素上，利用事件冒泡的机制，通过判断事件源的类型&