JavaScript事件流

概述

JavaScript事件流是描述事件在DOM结构中传播过程的机制。

什么是事件流？

事件流指的是当HTML元素发生某个事件时，该事件在DOM节点之间传播的路径。这个过程主要分为三个阶段：

1. 捕获阶段：事件从window对象向下传播至目标元素
2. 目标阶段：事件到达目标元素
3. 冒泡阶段：事件从目标元素向上冒泡至window对象

这个过程就像一颗石子投入水中：

• 捕获：石子从水面下沉到触达水底目标（从上到下）。
• 冒泡：触达目标后，气泡从水底升到水面（从下到上）。

这种设计源于浏览器早期两家公司的不同理念：网景主张事件捕获，微软主张事件冒泡。最终W3C制定了统一标准，同时支持两种传播方式。

事件流模型示例

<div id="outer">
  <div id="inner">点击我</div>
</div>

<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');
  
  // 捕获阶段（第三个参数为true）
  outer.addEventListener('click', function() {
    console.log('捕获阶段：外部元素');
  }, true);
  
  // 冒泡阶段（第三个参数为false或省略）
  outer.addEventListener('click', function() {
    console.log('冒泡阶段：外部元素');
  }, false);
  
  inner.addEventListener('click', function() {
    console.log('目标元素');
  });
</script>

当点击内部元素时，控制台将输出：

捕获阶段：外部元素
目标元素
冒泡阶段：外部元素

事件流的应用场景

事件委托

事件委托是事件流最重要的应用之一，它利用事件冒泡机制，将子元素的事件处理委托给父元素处理。

传统方式的问题：

// 为每个列表项添加点击事件
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    console.log('点击了项目:', this.textContent);
  });
});

// 动态添加新项目时，新项目没有事件处理
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目没有点击事件！

使用事件委托的解决方案：

// 将事件处理委托给父元素
document.querySelector('.list').addEventListener('click', function(e) {
  if (e.target.classList.contains('item')) {
    console.log('点击了项目:', e.target.textContent);
  }
});

// 现在动态添加的项目也会自动拥有点击事件
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目也有点击事件！

事件委托的优势：

• 减少内存消耗（只需一个事件处理程序）
• 动态添加的元素自动拥有事件处理
• 代码更简洁易维护

阻止事件传播

在某些情况下，我们需要控制事件的传播行为：

// 阻止事件冒泡
element.addEventListener('click', function(e) {
  e.stopPropagation();
  // 现在事件不会继续向上冒泡
});

// 阻止默认行为
link.addEventListener('click', function(e) {
  e.preventDefault();
  // 现在链接不会跳转
});

// 同时阻止冒泡和默认行为
element.addEventListener('click', function(e) {
  e.stopImmediatePropagation();
  // 阻止事件传播并阻止同一元素上的其他处理程序执行
});

自定义事件

利用事件流机制，我们可以创建和派发自定义事件：

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: '这是自定义数据' },
  bubbles: true,    // 事件是否冒泡
  cancelable: true  // 事件能否被取消
});

// 监听自定义事件
element.addEventListener('myEvent', function(e) {
  console.log('收到自定义事件:', e.detail.message);
});

// 派发事件
element.dispatchEvent(customEvent);

实际案例分析

如下按钮配合框架写法将更加简介

模态框实现

利用事件流实现点击模态框外部关闭功能：

class Modal {
  constructor(element) {
    this.modal = element;
    this.isOpen = false;
    
    // 点击模态框内部阻止事件冒泡
    this.modal.addEventListener('click', (e) => {
      e.stopPropagation();
    });
    
    // 点击外部关闭模态框
    document.addEventListener('click', () => {
      if (this.isOpen) {
        this.close();
      }
    });
  }
  
  open() {
    this.modal.style.display = 'block';
    this.isOpen = true;
  }
  
  close() {
    this.modal.style.display = 'none';
    this.isOpen = false;
  }
}

下拉菜单实现

class Dropdown {
  constructor(menuElement) {
    this.menu = menuElement;
    this.button = menuElement.querySelector('.dropdown-button');
    this.content = menuElement.querySelector('.dropdown-content');
    this.isOpen = false;
    
    // 点击按钮切换菜单
    this.button.addEventListener('click', (e) => {
      e.stopPropagation();
      this.toggle();
    });
    
    // 点击文档其他区域关闭菜单
    document.addEventListener('click', () => {
      if (this.isOpen) {
        this.close();
      }
    });
  }
  
  toggle() {
    if (this.isOpen) {
      this.close();
    } else {
      this.open();
    }
  }
  
  open() {
    this.content.style.display = 'block';
    this.isOpen = true;
  }
  
  close() {
    this.content.style.display = 'none';
    this.isOpen = false;
  }
}

总结与对比

特性	事件冒泡	事件捕获
传播方向	从目标元素向上传播到根节点	从根节点向下传播到目标元素
默认阶段	addEventListener 的默认监听阶段（第三个参数为 false 或未设置）	需要显式设置（第三个参数为 true 或 {capture: true}）
主要应用	事件委托，处理动态内容，优化性能	较少使用，可在事件到达目标前进行拦截或处理