React 中 `onScroll` 和 `onScrollCapture` 之间的区别？

Question

onScrollReact和React有什么区别onScrollCapture？

不确定这是 DOM 还是纯 JS 主题，因为我找不到任何有关onScrollCapture.

const node = (
  <div onScrollCapture={handleScrollCapture} />
);

Answer 1

onScrollCapture在 React 中相当于执行以下操作：

addEventListener('scroll', listener, { capture: true })

或者

addEventListener('scroll', listener, true)

在普通 JS 中。

两者都说：如果事件在子元素上触发，请先运行我的处理程序（父元素），然后再运行它们的处理程序。例如，当您单击下面演示中的按钮时，浏览器将首先运行父 div 的事件处理程序，然后再运行按钮本身的处理程序：

const parent = document.querySelector('.parent');
const button = parent.querySelector('button');

parent.addEventListener('click', () => console.log('parent'), true);
button.addEventListener('click', (e) => {
  console.log('button');
});

.parent {
  width: 100px;
  height: 100px;
  border: solid 1px black;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  background: white;
}

<div class="parent">
  <button>
    Click me
  </button>
</div>

传统上，当注册事件监听器时，你不需要addEventListener('event', listener)第三个参数（或者onEvent={listener}在 React 中）。如果事件目标是嵌套在当前元素内的子元素（如上例中的按钮），则这意味着该事件将：

1. 首先向目标开火（按钮），然后
2. 当这个元素（父 div）在树上冒泡时触发它（假设它完全冒泡）。

这是你所得到的onEventCapture以及它的 vanilla-JS 等价物的相反顺序。

更一般地说，所有事件都会经历三个阶段：

1. 捕获，从 DOM 树的根部开始，沿着路径向下查找实际触发事件的元素（目标）。
2. 目标确定，一旦到达目标，事件就会在目标本身上触发。
3. 冒泡，事件返回到 DOM 的根并在沿途的每个父元素上触发。（当且仅当事件冒泡时。）

对于父元素，事件仅在冒泡或捕获阶段触发，而不是同时触发，并且事件触发的时间由以下因素决定：

• 事件是否冒泡（有些事件不会）。
• 您是否向 提供了第三个参数addEventListener。

重要的是，该scroll事件不会冒泡。因此，在下面的示例中，当您滚动子 div 时，只有子 div 的消息会记录到控制台：

const parent = document.querySelector('.parent');
const child = parent.querySelector(':scope > *');

parent.addEventListener('scroll', () => console.log('parent scrolled'));
child.addEventListener('scroll', () => console.log('child scrolled'));

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  border: solid 1px black;
}

.parent {
  height: 250px;
  overflow-y: scroll;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.parent>* {
  height: 200px;
  overflow-y: auto;
}

<div class="parent">
  <div tabindex="0" role="region">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis augue quis turpis vestibulum volutpat a a sem. Maecenas ornare ac felis sed volutpat. Curabitur dapibus ante nec ante congue, et consectetur nunc tempor. Sed gravida posuere sollicitudin.
    Etiam feugiat a nulla vel consequat. Vestibulum vel massa faucibus, rutrum felis quis, mollis orci. Vivamus vestibulum ligula non orci cursus tincidunt. Proin hendrerit tincidunt finibus. Donec vitae aliquet sem. Nunc vel purus non nunc consectetur
    luctus in vel mauris. Donec varius quam risus, non lacinia orci rutrum in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc turpis, cursus sodales vulputate eu, eleifend fermentum est. Aliquam sollicitudin congue justo vitae ullamcorper.
    Proin lectus mi, faucibus vitae pharetra id, fringilla sit amet arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut ipsum nulla. Proin in aliquet purus, quis consectetur risus. Aliquam erat volutpat. Sed auctor tristique interdum.
    Morbi ac purus eget leo interdum gravida at ac nunc. Donec commodo vitae quam pulvinar bibendum. Duis nunc enim, scelerisque vel maximus quis, semper eu ipsum. Nam eu mollis ante.
  </div>
</div>

这意味着如果您想向父元素添加事件侦听器并检测子元素上的滚动，那么您需要使用滚动捕获，如下所示：

const parent = document.querySelector('.parent');
const child = parent.querySelector(':scope > *');

parent.addEventListener('scroll', () => console.log('parent scrolled'), true);
child.addEventListener('scroll', () => console.log('child scrolled'));

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  border: solid 1px black;
}

.parent {
  height: 250px;
  overflow-y: scroll;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.parent>* {
  height: 200px;
  overflow-y: auto;
}

<div class="parent">
  <div tabindex="0" role="region">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis augue quis turpis vestibulum volutpat a a sem. Maecenas ornare ac felis sed volutpat. Curabitur dapibus ante nec ante congue, et consectetur nunc tempor. Sed gravida posuere sollicitudin.
    Etiam feugiat a nulla vel consequat. Vestibulum vel massa faucibus, rutrum felis quis, mollis orci. Vivamus vestibulum ligula non orci cursus tincidunt. Proin hendrerit tincidunt finibus. Donec vitae aliquet sem. Nunc vel purus non nunc consectetur
    luctus in vel mauris. Donec varius quam risus, non lacinia orci rutrum in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc turpis, cursus sodales vulputate eu, eleifend fermentum est. Aliquam sollicitudin congue justo vitae ullamcorper.
    Proin lectus mi, faucibus vitae pharetra id, fringilla sit amet arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut ipsum nulla. Proin in aliquet purus, quis consectetur risus. Aliquam erat volutpat. Sed auctor tristique interdum.
    Morbi ac purus eget leo interdum gravida at ac nunc. Donec commodo vitae quam pulvinar bibendum. Duis nunc enim, scelerisque vel maximus quis, semper eu ipsum. Nam eu mollis ante.
  </div>
</div>