JavaScript事件 – BuildCodePro

JavaScript事件机制详解

适合初学者的JavaScript事件全面指南 – 用简单语言解释复杂概念

1. 什么是事件？

事件就是发生在网页上的各种”事情”：

用户操作（点击、移动鼠标、按键）
浏览器行为（页面加载完成、窗口大小改变）
网络活动（数据加载完成、请求失败）

JavaScript通过”监听”这些事件，可以在事件发生时执行特定的代码。

常见事件类型：

click – 鼠标点击

mouseover – 鼠标悬停

keydown – 按键按下

load – 页面加载完成

scroll – 页面滚动

2. 添加事件监听器

告诉JavaScript：”当这个事件发生时，请执行这些代码”。

三种主要方法：

1. HTML属性方式：直接在HTML标签中添加事件属性

2. DOM属性方式：通过JavaScript设置DOM元素的事件属性

const btn = document.getElementById(‘myBtn’);
btn.onclick = function() {
console.log(‘按钮被点击了’);
};

3. addEventListener方法（推荐）：最灵活的方式

btn.addEventListener(‘click’, function() {
console.log(‘按钮被点击了’);
});

3. 事件对象

当事件发生时，浏览器会创建一个包含事件信息的”事件对象”，自动传递给事件处理函数。

事件对象包含的重要信息：

target – 触发事件的元素
type – 事件类型（如’click’）
clientX/clientY – 鼠标位置
key – 按下的按键

document.addEventListener(‘click’, function(event) {
console.log(‘点击位置:’, event.clientX, event.clientY);
console.log(‘点击的元素:’, event.target.tagName);
});

4. 事件传播（冒泡与捕获）

事件在DOM树中传播的三个阶段：

1. 捕获阶段（从上往下）

↓

2. 目标阶段（到达目标元素）

↓

3. 冒泡阶段（从下往上）

事件捕获：从最外层元素向内传播（默认不监听）

事件冒泡：从目标元素向外传播（默认行为）

// 添加捕获阶段监听器
elem.addEventListener(‘click’, handler, true);

// 添加冒泡阶段监听器（默认）
elem.addEventListener(‘click’, handler, false);

5. 事件委托

利用事件冒泡原理，在父元素上监听事件，通过判断event.target来处理子元素的事件。

优点：

减少事件监听器数量，提高性能
自动处理动态添加的子元素
简化代码结构

// 在父元素上监听，而不是每个按钮
document.getElementById(‘btnContainer’).addEventListener(‘click’, function(e) {
  if(e.target.classList.contains(‘btn’)) {
    console.log(‘点击的按钮ID:’, e.target.id);
  }
});

6. 阻止默认行为与事件传播

阻止默认行为：

有些元素有默认行为（如链接跳转、表单提交）。使用event.preventDefault()阻止

document.querySelector(‘a’).addEventListener(‘click’, function(e) {
e.preventDefault(); // 阻止链接跳转
console.log(‘链接点击被阻止’);
});

阻止事件传播：

使用event.stopPropagation()阻止事件继续传播（冒泡或捕获）

inner.addEventListener(‘click’, function(e) {
  console.log(‘内部元素点击’);
  e.stopPropagation(); // 阻止事件冒泡
});

outer.addEventListener(‘click’, function() {
  // 由于传播被阻止，此函数不会执行
});

事件传播演示

点击下面的彩色方块，查看事件传播过程（捕获 → 目标 → 冒泡）

外层元素

中间元素

内层元素

点击任意方块查看事件传播过程…