浏览器事件机制详解以及发展史

公众号：小博的前端笔记

浏览器事件机制是前端开发的核心概念之一，涉及事件捕获、目标触发和事件冒泡三个阶段。以下是详细解析：

一、事件流（Event Flow）

浏览器事件传播分为三个阶段：

0. 捕获阶段（Capture Phase）

   • 事件从 window 逐级向下传递到目标元素（如 document → body → div）。
   • 使用 addEventListener(event, callback, true) 监听捕获阶段事件。

1. 目标阶段（Target Phase）

   • 事件到达目标元素，触发绑定在目标上的事件监听器。
   • 无论是否设置捕获模式，目标阶段都会触发。

2. 冒泡阶段（Bubble Phase）

   • 事件从目标元素逐级向上回传至 window（如 div → body → document）。
   • 默认监听冒泡阶段：addEventListener(event, callback, false) 或省略第三个参数。

二、事件监听与触发

1. 注册事件监听

// 冒泡阶段监听（默认）
element.addEventListener('click', (event) => {
  console.log('冒泡阶段触发');
});
​
// 捕获阶段监听
element.addEventListener('click', (event) => {
  console.log('捕获阶段触发');
}, true);

2. 事件对象（Event Object）

事件触发时，浏览器会创建 Event 对象，包含关键属性：

• event.target：实际触发事件的元素（事件起源）。
• event.currentTarget：当前处理事件的元素（监听器绑定的元素）。
• event.stopPropagation()：阻止事件继续传播（捕获或冒泡）。
• event.stopImmediatePropagation()：阻止同一元素上的其他监听器执行。
• event.preventDefault()：阻止默认行为（如链接跳转、表单提交）。

三、事件委托（Event Delegation）

利用冒泡机制，将子元素事件委托给父元素处理：

<ul id="parent">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
</ul>
​
<script>
  document.getElementById('parent').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      console.log('Clicked Item ID:', event.target.dataset.id);
    }
  });
</script>

优势：

• 减少内存占用（避免为每个子元素绑定监听）。
• 动态添加的子元素自动继承事件处理。

四、阻止事件传播与默认行为

方法	效果	使用场景
event.stopPropagation()	阻止事件继续传播	避免父元素触发同类事件
event.preventDefault()	阻止浏览器默认行为	如表单提交不刷新页面
return false	等同于同时调用以上两者（仅限 jQuery 和行内事件）	不推荐在现代原生 JS 中使用

五、事件级别（DOM 标准）

• DOM0 级事件 ：通过元素属性绑定（如 onclick），同一事件只能绑定一个处理函数。
• DOM2 级事件 ：使用 addEventListener，支持绑定多个处理函数，可控制捕获/冒泡。
• DOM3 级事件 ：增加更多事件类型（如 scroll、input），支持自定义事件。

六、自定义事件

通过 CustomEvent 创建并派发自定义事件：

// 创建事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: 'Custom data' },
  bubbles: true // 允许冒泡
});
​
// 监听事件
element.addEventListener('myEvent', (event) => {
  console.log(event.detail.message); // 输出 "Custom data"
});
​
// 触发事件
element.dispatchEvent(customEvent);

关键总结

0. 事件流顺序：捕获 → 目标 → 冒泡。
1. 事件委托：利用冒泡减少监听器数量，适合动态内容。
2. 事件控制 ：stopPropagation() 用于阻止传播，preventDefault() 用于阻止默认行为。
3. 最佳实践 ：优先使用 addEventListener，避免使用已废弃的 DOM0 级事件。

七、DOM0 、DOM2、DOM3的具体区别，以及为什么没有DOM1

DOM事件级别详解：DOM0、DOM2、DOM3 的区别及DOM1缺失原因

一、DOM事件级别演进

级别	特点	绑定方式示例	核心差异点
DOM0	非正式标准，早期浏览器实现	element.onclick = function() {}	每个事件只能绑定一个处理函数
DOM2	W3C正式标准（2000年）	element.addEventListener('click', fn)	支持多个监听器，捕获/冒泡可选
DOM3	DOM2扩展（2004年）	同DOM2	增加新事件类型，支持自定义事件

二、具体区别详解

1. DOM0级事件

• 本质：浏览器厂商的早期实现（非W3C标准）

• 特点：

  • 通过元素属性绑定：onclick、onmouseover等

  • 事件处理函数中的this指向当前元素

  • 致命缺陷：同一事件只能绑定一个处理函数

    // 后绑定的会覆盖前者
    btn.onclick = func1;
    btn.onclick = func2; // func1被覆盖

2. DOM2级事件

• 核心API ：addEventListener / removeEventListener

• 革命性改进：

  • ✅ 支持同一事件的多个监听器

    btn.addEventListener('click', func1);
    btn.addEventListener('click', func2); // 两个函数都会触发

  • ✅ 可控制事件阶段（第三个参数）：

    // true: 捕获阶段, false: 冒泡阶段（默认）
    btn.addEventListener('click', func, true); 

  • ✅ 更精确的事件流控制：

    • event.stopPropagation() 阻止传播
    • event.preventDefault() 阻止默认行为

3. DOM3级事件

• 主要扩展：

  • 🔥 新增事件类型：

    • UI事件：scroll, resize
    • 焦点事件：blur, focusin, focusout
    • 输入事件：input, compositionstart
    • 键盘事件：keydown, keypress, keyup

  • 🔥 自定义事件支持：

    const event = new CustomEvent('myEvent', { 
      detail: { message: 'Hello' },
      bubbles: true
    });
    element.dispatchEvent(event);

  • 🔥 事件取消增强：

    event.preventDefault(); // 可配合event.defaultPrevented检测

---

三、为什么没有DOM1级事件？

0. 历史原因：

   • DOM1标准（1998年）只定义了文档结构（如Node、Element接口）
   • 未包含事件模型：当时浏览器厂商（Netscape/IE）事件实现差异巨大
   • 标准化委员会优先解决文档结构统一性问题

1. 标准制定流程：

0. 现实妥协：

   • DOM0是事实标准（浏览器私有实现）
   • DOM2才首次将事件模型纳入官方标准
   • 术语"DOM0"是后来为区分非标准实现而创造的

---

四、关键差异对比表

特性	DOM0	DOM2	DOM3
标准状态	非正式	W3C标准	W3C标准
多监听器支持	❌ 仅一个	✅ 多个	✅ 多个
事件阶段控制	❌ 仅冒泡	✅ 捕获/冒泡可选	✅ 捕获/冒泡可选
事件类型	基础事件	基础事件	新增UI/输入/键盘等事件
自定义事件	❌	❌	✅
事件对象访问	⭕ 部分支持	✅ 完整Event API	✅ 增强Event API

---

五、现代开发建议

0. 弃用DOM0：

   // 避免使用
   element.onclick = handler;
   
   // 推荐使用
   element.addEventListener('click', handler);

1. 优先选择DOM2/3：

   • 需要兼容旧浏览器（IE9+）用DOM2
   • 现代项目可直接使用DOM3特性

2. 事件委托最佳实践：

   // 利用冒泡 + DOM2/3的多事件支持
   document.getElementById('list').addEventListener('click', e => {
     if(e.target.matches('li.item')) {
       console.log(e.target.dataset.id);
     }
   });

DOM事件模型的演进体现了Web标准的发展：从厂商私有实现（DOM0）到标准化（DOM2）再到功能扩展（DOM3）。