HTML

一、常见的浏览器默认事件

• form 的 submit 事件
• 回车键提交表单
• a 标签的 click 事件
• 移动端双指缩放 touchmove 事件

二、事件捕获与冒泡机制

当用户点击页面元素时，事件会经历三个阶段：

• ​捕获阶段（Capture Phase）​​：从 window → document → ... → 目标元素的父级
• ​目标阶段（Target Phase）​​：到达实际被点击的元素
• ​冒泡阶段（Bubble Phase）​​：从目标元素父级 → ... → document → window

假设有以下 HTML 结构：

<div class="grandparent">
  <div class="parent">
    <div class="child">点击我</div>
  </div>
</div>

我们给三个元素都添加事件监听：

const elements = document.querySelectorAll('.grandparent, .parent, .child');

// 捕获阶段监听（第三个参数为true）
elements.forEach(el => {
  el.addEventListener('click', () => {
    console.log(`捕获阶段: ${el.className}`);
  }, true);
});

// 冒泡阶段监听（第三个参数为false）
elements.forEach(el => {
  el.addEventListener('click', () => {
    console.log(`冒泡阶段: ${el.className}`);
  }, false);
});

当点击最内层的 child 时，控制台会按以下顺序输出：

捕获阶段: grandparent
捕获阶段: parent
捕获阶段: child
冒泡阶段: child
冒泡阶段: parent
冒泡阶段: grandparent

三、