当前位置：首页 > React

react如何事件代理

2026-03-10 23:31:59React

React 中的事件代理

React 的事件处理机制本身就是基于事件代理（Event Delegation）实现的。React 将所有事件委托到文档（document）级别，而不是直接绑定到具体的 DOM 节点。这种方式可以优化性能并简化事件管理。

事件代理的原理

React 在组件挂载时不会为每个元素单独绑定事件监听器，而是在顶层注册一个统一的事件监听器。当事件触发时，React 会根据事件的目标（target）找到对应的组件，并调用相应的事件处理函数。

实现事件代理的方法

使用 onClick 等合成事件

react如何事件代理

React 提供了一系列合成事件（如 onClick、onChange），这些事件会自动委托到文档级别。直接在组件上使用这些事件即可实现事件代理。

function List() {
  const handleClick = (event) => {
    console.log('Clicked item:', event.target.dataset.id);
  };

  return (
    <ul onClick={handleClick}>
      <li data-id="1">Item 1</li>
      <li data-id="2">Item 2</li>
      <li data-id="3">Item 3</li>
    </ul>
  );
}

通过事件冒泡实现代理

react如何事件代理

利用事件冒泡机制，可以在父元素上监听子元素的事件。例如，点击子元素时，事件会冒泡到父元素，从而触发父元素的事件处理函数。

function ParentComponent() {
  const handleChildClick = (event) => {
    if (event.target.tagName === 'BUTTON') {
      console.log('Button clicked:', event.target.textContent);
    }
  };

  return (
    <div onClick={handleChildClick}>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  );
}

自定义事件代理

如果需要更灵活的事件代理，可以手动实现。例如，通过 event.target 判断事件来源并执行不同的逻辑。

function CustomEventDelegation() {
  const handleEvent = (event) => {
    const { id } = event.target;
    switch (id) {
      case 'btn1':
        console.log('Button 1 clicked');
        break;
      case 'btn2':
        console.log('Button 2 clicked');
        break;
      default:
        break;
    }
  };

  return (
    <div onClick={handleEvent}>
      <button id="btn1">Button 1</button>
      <button id="btn2">Button 2</button>
    </div>
  );
}