React中onScroll与onScrollCapture的区别是什么？

这两个都是React的合成事件，属于React对DOM事件的封装，并非纯原生JS特性——原生DOM没有onScrollCapture这个属性，它是React为了方便开发者处理事件捕获阶段而提供的语法糖。

核心区别在于事件触发的阶段：

• onScroll：在事件的冒泡阶段触发。当滚动事件从触发滚动的元素向上冒泡到父级元素时，各元素绑定的onScroll会按从子到父的顺序依次执行。
• onScrollCapture：在事件的捕获阶段触发。当滚动事件从最外层的祖先元素向下传递到触发滚动的目标元素时，各元素绑定的onScrollCapture会按从父到子的顺序依次执行。

执行顺序示例 #

假设有嵌套的父子元素，分别绑定这两类事件，触发子元素滚动时，事件执行顺序如下：

function ScrollTest() {
  const log = (msg) => console.log(msg);

  return (
    <div 
      style={{ height: 300, overflow: 'auto', border: '1px solid #999' }}
      onScrollCapture={() => log('父元素 - 捕获阶段')}
      onScroll={() => log('父元素 - 冒泡阶段')}
    >
      <div 
        style={{ height: 600, padding: '1rem' }}
        onScrollCapture={() => log('子元素 - 捕获阶段')}
        onScroll={() => log('子元素 - 冒泡阶段')}
      >
        滚动此区域查看事件执行顺序
      </div>
    </div>
  );
}

滚动子元素时，控制台输出顺序为：

父元素 - 捕获阶段
子元素 - 捕获阶段
子元素 - 冒泡阶段
父元素 - 冒泡阶段

简单总结：如果需要在事件到达目标元素前就处理滚动逻辑，用onScrollCapture；如果需要在事件冒泡过程中处理，用onScroll。

内容的提问来源于stack exchange，提问作者jakub_jo