事件流与事件委托：当点击按钮时，浏览器里发生了什么？

当前位置：点晴教程→知识管理交流 →『技术文档交流』

zhenglin

2026年4月2日 9:4 本文热度 69

你点了一个按钮，但它可能不是“它”自己响应的。今天我们就来扒一扒浏览器里那场“谁该负责”的点击风波——事件流。从捕获到冒泡，从目标阶段到事件委托，让你彻底弄懂点一下按钮，背后的整个江湖。

前言

想象一下，你点了一个按钮。这个按钮在一个卡片里，卡片在一个列表里，列表在一个页面里。那么问题来了：是按钮自己“听到”了点击，还是卡片先听到，还是页面先听到？

浏览器其实有一套严格的“传话”机制：事件流。它规定了事件从哪来，到哪去，谁先响应。今天我们就来当一回“事件侦探”，追踪一次点击的完整旅程。

一、事件流三阶段：从外到内，再从内到外

当一个事件（比如点击）发生时，它会在DOM树里走一个完整的“U型”路线：

捕获阶段：事件从window往下走，经过祖先节点，一直到目标元素的父节点。这个阶段像“下楼梯”。
目标阶段：事件到达目标元素（你点的那个按钮）。这个阶段像“踩到地雷”。
冒泡阶段：事件从目标元素往上走，经过父节点、祖先节点，一直到window。这个阶段像“上楼梯”。

用代码验证一下：

<div id="parent">
  <button id="child">点我</button>
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');


parent.addEventListener('click', () => console.log('parent 捕获'), true);
parent.addEventListener('click', () => console.log('parent 冒泡'));
child.addEventListener('click', () => console.log('child 捕获'), true);
child.addEventListener('click', () => console.log('child 冒泡'));


// 点击按钮，输出顺序：
// parent 捕获
// child 捕获
// child 冒泡
// parent 冒泡

addEventListener的第三个参数useCapture：true表示在捕获阶段触发，false（默认）表示在冒泡阶段触发。

二、事件代理：把监听器交给“外包公司”

假如你有一个列表，里面有一百个按钮。给每个按钮都加一个点击事件，不仅代码繁琐，而且内存占用高。这时候，事件委托（又叫事件代理）就派上用场了。

原理：利用事件冒泡，把监听器加在父元素上，然后通过event.target判断具体是哪个子元素被点击。

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

const list = document.getElementById('list');
list.addEventListener('click', (e) => {
  // e.target 是实际被点击的元素
  if (e.target.tagName === 'LI') {
    console.log('你点了：', e.target.textContent);
  }
});

这样，不管以后动态添加多少<li>，都不用再单独绑定事件了。这就是事件委托的威力——用一个监听器管理所有子元素。

三、阻止传播：中途截胡

有时候，你不想让事件继续往上冒泡，可以用stopPropagation()。

child.addEventListener('click', (e) => {
  e.stopPropagation(); // 事件不再向上冒泡
  console.log('点到按钮了');
});

如果既想阻止冒泡，又不想影响当前元素的其他同类型监听器，可以用stopImmediatePropagation()。

注意：不是所有事件都冒泡。比如focus、blur、scroll不冒泡，但focusin、focusout冒泡。

四、阻止默认行为：让浏览器别“自动执行”

有些事件有默认行为，比如点击<a>会跳转，点击表单提交按钮会刷新页面。你可以用preventDefault()阻止它。

document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // 不会跳转
  console.log('链接被点了，但不跳转');
});

五、实战：事件委托实现todo列表的删除

我们来升级昨天的待办列表，用事件委托管理删除按钮。

<div id="todo-app">
  <input id="todo-input" type="text" placeholder="输入待办">
  <button id="add-btn">添加</button>
  <ul id="todo-list"></ul>
</div>

const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');


function addTodo() {
  const text = input.value.trim();
  if (!text) return;
  
  const li = document.createElement('li');
  li.innerHTML = `${text} <button class="delete-btn">删除</button>`;
  list.appendChild(li);
  input.value = '';
}


// 事件委托：监听整个列表
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete-btn')) {
    const li = e.target.closest('li'); // 找到按钮所在的li
    li.remove();
  }
});


addBtn.addEventListener('click', addTodo);
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTodo();
});