当前位置：首页 > React

react如何事件委托

2026-03-11 05:52:08React

React 中的事件委托实现

React 本身已经内置了事件委托机制，所有事件都通过合成事件（SyntheticEvent）系统自动委托到 document 节点（React 17 之前）或根 DOM 节点（React 17 及之后）。以下是具体实现方式和注意事项：

自动事件委托原理

React 的事件处理函数不会直接绑定到 DOM 元素上，而是通过顶层监听器统一管理。当事件触发时，React 会根据事件冒泡机制找到对应的处理函数执行。

react如何事件委托

// 所有 onClick 都会被委托到根节点
function Component() {
  const handleClick = (e) => console.log(e.target);
  return <button onClick={handleClick}>Click</button>;
}

手动实现事件委托

如果需要手动控制委托层级（例如性能优化），可以通过以下方式：

react如何事件委托

function List() {
  const handleClick = (e) => {
    if (e.target.tagName === 'BUTTON') {
      console.log('Button clicked:', e.target.dataset.id);
    }
  };

  return (
    <div onClick={handleClick}>
      <button data-id="1">Item 1</button>
      <button data-id="2">Item 2</button>
    </div>
  );
}

React 17+ 的事件委托变化

从 React 17 开始，事件委托的挂载点从 document 改为渲染树的根 DOM 容器，避免多版本 React 共存时的问题：

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode); 
// 事件现在委托到 rootNode 而非 document

性能优化建议

对于长列表的子项事件，委托到父元素比单独绑定每个元素更高效：

function LargeList({ items }) {
  const handleItemClick = (e) => {
    const id = e.target.closest('li').dataset.id;
    console.log('Selected:', id);
  };

  return (
    <ul onClick={handleItemClick}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}