JavaScript 浏览器事件简介

浏览器事件是JavaScript与HTML交互的核心机制，允许代码对用户操作或浏览器状态变化做出响应。以下是浏览器事件的基本概念和用法：

事件基础

事件是发生在HTML元素上的特定动作，例如：

• 用户点击按钮（click事件）
• 页面加载完成（load事件）
• 表单提交（submit事件）
• 键盘按键被按下（keydown事件）

事件处理方式

1. HTML属性处理

<button onclick="alert('按钮被点击!')">点击我</button>

2. DOM属性处理

const btn = document.getElementById('myButton');
btn.onclick = function() {
  console.log('按钮被点击!');
};

3. 使用addEventListener()（推荐）

const btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  console.log('按钮被点击!');
});

常用事件类型

鼠标事件

• click - 点击
• dblclick - 双击
• mouseover/mouseout - 鼠标移入/移出
• mousedown/mouseup - 鼠标按下/释放
• mousemove - 鼠标移动

键盘事件

• keydown - 键按下
• keyup - 键释放
• keypress - 键按下并释放（已弃用）

表单事件

• submit - 表单提交
• change - 表单元素值改变
• focus/blur - 获取/失去焦点
• input - 输入值变化

窗口事件

• load - 页面加载完成
• resize - 窗口大小改变
• scroll - 滚动
• beforeunload - 页面即将卸载

事件对象

事件处理函数会接收一个事件对象参数，包含事件相关信息：

element.addEventListener('click', function(event) {
  console.log('事件类型:', event.type);
  console.log('触发元素:', event.target);
  console.log('鼠标位置:', event.clientX, event.clientY);
});

事件传播

事件在DOM中有三个阶段：

1. 捕获阶段 - 从window向下传播到目标元素
2. 目标阶段 - 到达目标元素
3. 冒泡阶段 - 从目标元素向上传播回window

可以使用addEventListener的第三个参数控制监听阶段：

// 捕获阶段处理
element.addEventListener('click', handler, true);

// 冒泡阶段处理（默认）
element.addEventListener('click', handler, false);

阻止默认行为和传播

• event.preventDefault() - 阻止默认行为（如表单提交）
• event.stopPropagation() - 阻止事件继续传播
• event.stopImmediatePropagation() - 阻止其他监听器执行

事件委托

利用事件冒泡，在父元素上处理子元素的事件：

document.getElementById('parent').addEventListener('click', function(event) {
  if(event.target.matches('button.child')) {
    console.log('子按钮被点击');
  }
});

现代事件处理

现代JavaScript框架（如React、Vue）提供了自己的事件系统，但底层仍基于这些浏览器原生事件机制。

理解浏览器事件是开发交互式Web应用的基础，掌握这些概念将帮助你创建更动态、响应式的用户体验。