事件
浏览器中发生交互性操作的反应
事件处理
目的：
执行某些副作用：更新页面状态 / 与后端服务器进行交互
规范：
名称以
handle开头，后跟事件名称。
事件处理函数
先定义一个函数，然后将其作为prop 传入合适的 JSX 标签
事件传播
事件会沿着树向上冒泡/传播 => 它从事件开始的地方发生，沿着树向上传播
-
React中事件处理函数会捕获任何来自子组件的事件
-
React中除了
onScroll，其余事件都会传播
onScroll
scroll事件是由浏览器引擎实现的，而非JS引擎实现
React为了保持一致性，将
onScroll设置为不会冒泡传播
// 如果需要在父级元素上处理onScroll怎么做？-- 使用原生DOM事件监听
const MyComponent = () => {
const containerRef = useRef(null);
const handleScroll = (event) => {
// 在父组件中处理滚动事件的逻辑
}
// 在组件挂载时，为元素添加 scroll 事件监听器
useEffect(() => {
const container = containerRef.current;
if (container) {
container.addEventListener('scroll', handleScroll);
}
// 组件卸载时，移除事件监听器
return () => {
if (container) {
container.removeEventListener('scroll', handleScroll);
}
};
}, []);
return (
<div ref={containerRef}>
{/* 渲染组件的内容 */}
</div>
);
}
why addEventListener
addEventListener方法也接受一个可选的第三个参数，该参数指示事件是否应该在捕获或冒泡阶段处理。默认情况下，事件在冒泡阶段处理。如果您想在捕获阶段处理事件，将第三个参数设置为true。- 可以为单个元素添加多个事件处理程序，并且可以轻松地将事件处理程序移除。
阻止传播
目的： 阻止触发绑定在外层标签上的事件处理函数
1.不触发其他事件处理程序
2.在event delegation中，将事件处理程序添加到某个祖先元素上，并使用
event.target属性来检测事件的起源元素，可能需要在事件处理程序中使用e.stopPropagation()方法来防止事件继续传播到祖先元素。应用场景：
1.点击列表项，不希望触发整个列表或者其父级元素上的其他事件
2.弹出式菜单中，防止菜单在点击时被关闭...
方法：
e.stopPropagation()
<button onClick={e => {
e.stopPropagation();
onClick();
}}>
{children}
</button>
阻止默认行为
目的： 阻止少数事件的默认浏览器行为。
某些浏览器事件具有与事件相关联的默认行为。例如，点击
<form>表单内部的按钮会触发表单提交事件，默认情况下将重新加载整个页面：方法：
e.preventDefault()
