JavaScript系列06-深入理解 JavaScript 事件系统：从原生事件到 React 合成事件

JavaScript 事件系统是构建交互式 Web 应用的核心。本文从原生 DOM 事件到 React 的合成事件，内容涵盖：

1. JavaScript 事件基础：事件类型、事件注册、事件对象
2. 事件传播机制：捕获、目标和冒泡阶段
3. 高级事件技术：事件委托、自定义事件
4. React 合成事件系统：特点、与原生事件的区别、使用方式

1. JavaScript 事件系统基础

JavaScript 事件系统是前端开发的核心机制之一，它允许网页对用户交互做出响应。简单来说，事件是在浏览器中发生的特定动作，如点击按钮、提交表单、加载页面等。

1.1事件的本质

从本质上讲，JavaScript 事件是一种观察者模式（Observer Pattern）的实现。在这种模式中：

• DOM 元素作为被观察者（Subject）
• 事件处理函数作为观察者（Observer）
• 当特定动作发生时，浏览器通知所有注册的观察者
  

1.2 基础事件类型

JavaScript 提供了众多内置事件类型，包括但不限于：

• 鼠标事件 ：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
• 键盘事件 ：keydown, keypress, keyup
• 表单事件 ：submit, change, focus, blur
• 窗口事件 ：load, resize, scroll, unload
• 触摸事件 ：touchstart, touchmove, touchend, touchcancel

1.3 注册事件处理程序的方式

在 JavaScript 中，有三种主要的方式来注册事件处理程序：

• HTML 属性（不推荐）

<button onclick="handleClick()">点击我</button>

• DOM 属性

const button = document.querySelector('button');
button.onclick = function() {
  console.log('按钮被点击了');
};

• 事件监听器（推荐）

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('按钮被点击了');
});

使用 addEventListener 的优势在于：

• 可以为同一事件注册多个处理程序
• 提供更精细的控制（如捕获阶段）
• 可以轻松移除事件监听器
• 符合 W3C 标准

2. DOM 事件模型详解

DOM（文档对象模型）事件模型定义了事件如何在 DOM 树中传播，以及如何对其进行处理。

2.1 事件对象

当事件被触发时，浏览器会创建一个事件对象（Event object），并将其作为参数传递给事件处理函数。这个对象包含了与事件相关的各种信息：

document.addEventListener('click', function(event) {
  console.log('事件类型:', event.type);
  console.log('目标元素:', event.target);
  console.log('当前元素:', event.currentTarget);
  console.log('事件发生时间:', event.timeStamp);
  console.log('鼠标位置:', event.clientX, event.clientY);
});

常用的事件对象属性和方法包括：

属性/方法	描述
type	事件类型（如 "click", "load" 等）
target	触发事件的最深层 DOM 元素
currentTarget	当前处理事件的 DOM 元素
preventDefault()	阻止默认行为
stopPropagation()	阻止事件冒泡
stopImmediatePropagation()	阻止事件冒泡并阻止当前元素上的其他监听器被调用
timeStamp	事件创建时的时间戳

3. 事件传播机制：捕获与冒泡

DOM 事件传播过程中有三个阶段：

1. 捕获阶段：事件从 Window 对象向下传递到目标元素
2. 目标阶段：事件到达目标元素
3. 冒泡阶段 ：事件从目标元素向上冒泡到 Window 对象
   

3.1 捕获阶段

在捕获阶段，事件从 Window 开始，依次向下传递到目标元素。默认情况下，大多数事件处理程序都不会在捕获阶段被触发，除非在 addEventListener 方法的第三个参数中指定 true：

document.querySelector('div').addEventListener('click', function(event) {
  console.log('在捕获阶段处理点击事件');
}, true); // 第三个参数设为 true，表示在捕获阶段处理

3.2 冒泡阶段

在冒泡阶段，事件从目标元素开始，向上传递到 Window。默认情况下，事件处理程序在冒泡阶段被触发：

document.querySelector('button').addEventListener('click', function(event) {
  console.log('按钮被点击了');
}); // 默认在冒泡阶段处理

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div 的点击事件也被触发了（通过冒泡）');
}); // 默认在冒泡阶段处理

3.3 阻止事件传播

有时候我们需要阻止事件继续传播，可以使用 stopPropagation() 方法：

document.querySelector('button').addEventListener('click', function(event) {
  console.log('按钮被点击了');
  event.stopPropagation(); // 阻止事件冒泡
  // 上层元素的事件处理程序不会被调用
});

或者使用更强大的 stopImmediatePropagation()，它不仅阻止冒泡，还阻止当前元素上的其他监听器被调用：

document.querySelector('button').addEventListener('click', function(event) {
  console.log('这个处理程序会执行');
  event.stopImmediatePropagation();
});

document.querySelector('button').addEventListener('click', function(event) {
  console.log('这个处理程序不会执行');
});

4. 事件处理模式与最佳实践

4.1 分离关注点

将事件监听与业务逻辑分离，使代码更易于维护：

// 不推荐
document.querySelector('button').addEventListener('click', function() {
  // 直接在这里处理复杂的业务逻辑
  const data = fetchData();
  processData(data);
  updateUI();
});

// 推荐
function handleButtonClick() {
  const data = fetchData();
  processData(data);
  updateUI();
}

document.querySelector('button').addEventListener('click', handleButtonClick);

4.2 命名事件处理函数

使用描述性的函数名，使代码更具可读性：

// 不推荐
button.addEventListener('click', function(e) { /* ... */ });

// 推荐
button.addEventListener('click', handleSubmitForm);
button.addEventListener('click', validateUserInput);

4.3 移除不需要的事件监听器

当不再需要事件监听器时，应该及时移除它们，以防止内存泄漏：

function handleClick() {
  console.log('处理点击事件');
}

// 添加事件监听器
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

// 当不再需要时移除事件监听器
button.removeEventListener('click', handleClick);

注意：要成功移除事件监听器，添加和移除时使用的必须是同一个函数引用，匿名函数无法被删除。

5. 事件委托：提升性能的关键技术

事件委托（Event Delegation）是一种利用事件冒泡机制的技术，它允许我们将事件监听器附加到父元素上，而不是直接附加到多个子元素上。

5.1 事件委托的优势

1. 减少事件监听器数量：一个监听器代替多个，减少内存消耗
2. 动态元素处理：自动处理动态添加的元素
3. 代码简洁：集中管理相关元素的事件处理

5.2 实现事件委托

// 没有使用事件委托
// 为每个列表项添加事件监听器
document.querySelectorAll('li').forEach(item => {
  item.addEventListener('click', function() {
    console.log('列表项被点击:', this.textContent);
  });
});

// 使用事件委托
// 只在父元素上添加一个事件监听器
document.querySelector('ul').addEventListener('click', function(event) {
  // 检查目标元素是否为列表项
  if (event.target.tagName === 'LI') {
    console.log('列表项被点击:', event.target.textContent);
  }
});

5.3 使用 closest() 方法优化事件委托

当处理嵌套元素时，event.target 可能是目标元素内部的子元素。这时可以使用 closest() 方法来查找最近的匹配元素：

document.querySelector('ul').addEventListener('click', function(event) {
  // 查找最近的 li 元素
  const listItem = event.target.closest('li');
  
  // 确保找到的元素在当前列表内
  if (listItem && this.contains(listItem)) {
    console.log('列表项被点击:', listItem.textContent);
  }
});

6. 自定义事件：扩展事件系统

除了浏览器提供的原生事件外，JavaScript 还允许我们创建和触发自定义事件，这对于组件间通信非常有用。

6.1 创建自定义事件

创建自定义事件有两种方式：

• 使用 Event 构造函数：

const event = new Event('build');

// 监听事件
document.addEventListener('build', function(e) {
  console.log('构建事件被触发');
});

// 触发事件
document.dispatchEvent(event);

• 使用 CustomEvent 构造函数（可以传递自定义数据）：

const event = new CustomEvent('userLogin', {
  detail: {
    username: 'John',
    loginTime: new Date()
  }
});

// 监听事件
document.addEventListener('userLogin', function(e) {
  console.log('用户登录:', e.detail.username);
  console.log('登录时间:', e.detail.loginTime);
});

// 触发事件
document.dispatchEvent(event);

6.2自定义事件在组件通信中的应用

自定义事件可以用于在不直接相关的组件之间进行通信：

// 购物车组件
class ShoppingCart {
  constructor() {
    this.items = [];
  }
  
  addItem(item) {
    this.items.push(item);
    
    // 创建并触发自定义事件
    const event = new CustomEvent('cartUpdated', {
      detail: {
        itemCount: this.items.length,
        lastItemAdded: item
      }
    });
    
    document.dispatchEvent(event);
  }
}

// 通知组件
class NotificationCenter {
  constructor() {
    // 监听购物车更新事件
    document.addEventListener('cartUpdated', this.handleCartUpdate.bind(this));
  }
  
  handleCartUpdate(event) {
    const { itemCount, lastItemAdded } = event.detail;
    this.showNotification(`添加了 ${lastItemAdded.name} 到购物车，当前共有 ${itemCount} 件商品`);
  }
  
  showNotification(message) {
    console.log('通知:', message);
    // 显示通知 UI
  }
}

// 使用示例
const cart = new ShoppingCart();
const notifications = new NotificationCenter();

cart.addItem({ id: 1, name: '手机', price: 999 });

7. React 合成事件系统

React 实现了自己的事件系统，称为"合成事件"（Synthetic Events）。它是对原生浏览器事件的跨浏览器包装，旨在使事件在不同浏览器中的行为一致。

7.1 合成事件的特点

1. 跨浏览器一致性：抹平不同浏览器的差异
2. 性能优化：使用事件委托和事件池
3. 自动绑定：React 组件中的事件处理方法可以自动绑定到组件实例

7.2 React 事件与原生事件的区别

1. 命名约定 ：React 使用驼峰命名（如 onClick 而非 onclick）
2. 传递函数：React 传递函数作为事件处理程序，而不是字符串
3. 返回 false 不阻止默认行为 ：必须显式调用 preventDefault()
4. 事件委托：React 将大多数事件委托到根节点（document），而不是实际的 DOM 元素
5. 合成事件对象：React 的事件对象是合成的，不是原生的

7.3 在 React 中使用事件

class ClickCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    
    // 绑定 this
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(event) {
    // event 是 React 的合成事件对象
    console.log('事件类型:', event.type);
    console.log('目标元素:', event.target);
    
    // 更新状态
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
    
    // 阻止默认行为
    event.preventDefault();
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        点击了 {this.state.count} 次
      </button>
    );
  }
}

在函数组件中：

function ClickCounter() {
  const [count, setCount] = useState(0);
  
  const handleClick = (event) => {
    setCount(count + 1);
  };
  
  return (
    <button onClick={handleClick}>
      点击了 {count} 次
    </button>
  );
}

7.4 事件处理函数中的 this 绑定

在 React 类组件中，事件处理函数的 this 默认不指向组件实例，有以下几种解决方法：

• 在构造函数中绑定：

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

• 使用箭头函数：

// 在类中使用箭头函数定义方法
handleClick = (event) => {
  this.setState({ count: this.state.count + 1 });
};

• 在渲染时使用箭头函数（不推荐，每次渲染会创建新函数）：

render() {
  return <button onClick={(e) => this.handleClick(e)}>点击</button>;
}

7.5 合成事件与原生事件的交互

在某些情况下，需要同时使用 React 合成事件和 DOM 原生事件：

class HybridEventComponent extends React.Component {

  
  constructor(props) {
    super(props);
    this.buttonRef = React.createRef();
    
    // 绑定 this
    this.handleResize = this.handleResize.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleNativeClick = this.handleNativeClick.bind(this);
  }
  componentDidMount() {
    // 添加原生事件监听器
    window.addEventListener('resize', this.handleResize);
    // 添加到 DOM 元素
    this.buttonRef.current.addEventListener('click', this.handleNativeClick);
  }
  
  componentWillUnmount() {
    // 记得清理！
    window.removeEventListener('resize', this.handleResize);
    this.buttonRef.current.removeEventListener('click', this.handleNativeClick);
  }
  
  handleResize(event) {
    console.log('窗口大小改变 - 原生事件');
    // 这里的 event 是原生 DOM 事件对象
  }
  
  handleClick(event) {
    console.log('按钮点击 - React 合成事件');
    // 这里的 event 是 React 合成事件对象
  }
  
  handleNativeClick(event) {
    console.log('按钮点击 - 原生事件');
    // 这里的 event 是原生 DOM 事件对象
  }
  
  render() {
    return (
      <button 
        ref={this.buttonRef} 
        onClick={this.handleClick}
      >
        点击我
      </button>
    );
  }
}

7.6 React 17 中的事件系统更新

在 React 17 中，React 的事件系统进行了重大更新：

1. 事件委托位置变更 ：从 document 移动到了 React 树的根 DOM 容器，这使得在同一页面上运行多个 React 版本成为可能
2. 去除事件池 ：合成事件对象不再被复用，不需要调用 e.persist()
3. 对齐原生浏览器行为 ：如 onScroll 不再冒泡，onFocus 和 onBlur 使用原生 focusin/focusout 事件

React 18 及更高版本继续保持这些更改，并进一步优化了事件系统的性能。

总结

掌握 JavaScript 事件系统不仅能帮助我们构建更好的用户界面，还能提高应用的性能和可维护性。无论是使用原生 JavaScript 还是现代前端框架，深入理解事件系统都是前端开发的必备技能。