概念
React 合成事件是 React 提供的一种统一的事件系统，它可以在不同浏览器中使用同一套 API 以及一致的行为。它把浏览器提供的原生事件封装成了一组高层次的合成事件，支持各种鼠标，键盘和触摸事件。
syntheticEvent.png
具体的合成事件
1. Clipboard Events：
复制、剪切和粘贴事件。在React 中可以通过使用 useClipboard hook 来处理 Clipboard 事件。例如，你可以使用它来实现一个复制功能：
import React from 'react';
import { useClipboard } from 'react-use';
function MyComponent() {
const [text, setText] = React.useState('');
const { copy, text: copiedText } = useClipboard(text);
return (
<div>
<input
value={text}
onChange={event => setText(event.target.value)}
/>
<button onClick={copy}>复制</button>
{copiedText && <span>已复制：{copiedText}</span>}
</div>
);
}
2. Composition Events：
文本输入组合事件。它是React提供的一组特殊的事件，用于处理输入字符、粘贴和拖放。它们可以帮助开发者更容易地操作文本输入框以及其他使用文本输入的组件。例如，使用Composition events可以让开发者为输入框添加监听器，以捕获用户输入的字符：
class MyComponent extends React.Component {
render() {
return (
<input
onCompositionStart={() => console.log("Composition start")}
onCompositionUpdate={(e) => console.log("Composition update", e.data)}
onCompositionEnd={() => console.log("Composition end")}/>
);
}
}
上面的代码中，当用户开始输入字符时，onCompositionStart 函数就会被调用；当用户继续输入字符时，onCompositionUpdate 函数就会被调用，并且可以获取已输入的字符数据；当用户输入完成时，onCompositionEnd 函数就会被调用。
3. Keyboard Events：
键盘事件。在 React 中，可以使用onKeyDown、onKeyPress 和onKeyUp 事件处理器来响应键盘事件。例如：
<input
type="text"
onKeyDown={e => {
if (e.key === 'Enter') {
// Do something
}
}}
/>
上面的例子中，我们使用onKeyDown事件处理器来监听按下“Enter”键的事件，如果按下“Enter”键，就会执行后续的处理逻辑。
4. Focus Events：
聚焦事件，Focus Events 是一组可以帮助我们监听用户和输入控件之间的交互行为的事件，它们包括: onFocus, onBlur, onFocusChange 以及 onFocusVisibleChange。
下面是一个示例，当用户聚焦在一个文本框上时，会执行函数handleFocus：
<input type="text" onFocus={handleFocus} />
function handleFocus(){
console.log('You have focused on the textbox');
}
5. Form Events：
表单事件，Form Events 是 React 中的一种特殊的事件，用于处理表单元素的操作。React 支持以下几种常见的 Form Events：
- onChange：当表单元素中的内容发生变化时触发，例如输入框中的文本、下拉框中的选项等。
- onSubmit：当表单元素中的内容提交时触发，常用于处理表单提交事件。
- onFocus：当表单元素获得焦点时触发，例如输入框获得焦点时触发。
- onBlur：当表单元素失去焦点时触发，例如输入框失去焦点时触发。
例如，我们可以使用 onChange 事件来实现一个文本输入框：
<input type="text" onChange={handleChange} />
其中，handleChange 是一个处理函数，用来处理文本输入框中文本变化后的事件：
const handleChange = (event) => {
console.log('The value of the input is ' + event.target.value);
}
6. Mouse Events：
鼠标事件，在 React 中，可以使用 Mouse Events 来处理鼠标事件。下面是一个例子：
class MyComponent extends React.Component {
handleMouseMove(e) {
console.log('The mouse moved!', e);
}
render() {
return (
<div onMouseMove={this.handleMouseMove}>
Move the mouse around!
</div>
);
}
}
在上面的代码中，我们在 MyComponent 的 render 方法中添加了一个 onMouseMove 属性，值为 this.handleMouseMove，它指向一个处理鼠标移动的函数，在每次鼠标移动的时候，都会调用这个函数。当用户在 MyComponent 组件中移动鼠标时，就会在控制台输出“The mouse moved!”信息。
7. Selection Events：
选择事件，React 中的 Selection Events 是包含在 SyntheticEvent 中的一组事件，它们用于监听用户选择内容的行为。下面是一个例子：
<input
type="text"
onSelect={() => {
// 当用户选择输入框中的文本时，执行以下操作
console.log('Text was selected!');
}}
/>
在上面的代码中，当用户选择输入框中的文本时，控制台将会输出“Text was selected!”。
8. Touch Events：
触摸事件，React 中的 Touch Events 可以用来处理手机或平板的触摸事件，它们可以用来检测用户是否在屏幕上点击，滑动，或者缩放。下面是一个使用 Touch Events 来判断用户是否点击一个按钮的例子：
import React, { useState } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';
const App = () => {
const [isClicked, setIsClicked] = useState(false);
const handleClick = () => setIsClicked(true);
return (
<View>
<TouchableHighlight onPress={handleClick}>
<Text>Click me!</Text>
</TouchableHighlight>
{isClicked && <Text>You clicked!</Text>}
</View>
);
};
在上面的代码中，我们使用了 TouchableHighlight 组件，用它的 onPress 事件来设置 isClicked 的状态，当用户点击按钮时，isClicked 的状态就会被设置为 true，然后就会显示 You clicked! 的消息。
9. UI Events：
用户界面事件，React 中的 UI Events 可以让用户在页面上的操作对应到 React 应用上的反应。例如，当用户点击按钮时，可以使用 onClick 事件处理器来触发一个动作：
<button onClick={() => setCounter(counter + 1)}>
Increase Counter
</button>
此外，React 还支持常用的其他事件，如 onChange、onSubmit、onMouseOver 等。
10. Wheel Events：
滚轮事件，Wheel Events 是一种 React 事件，用来捕获鼠标滚轮滚动的动作。它可以用于处理滚动动作的响应，如在图片浏览器中实现图片放大缩小的功能。
例如：
import React, { useRef, useEffect } from "react";
const ImageViewer = () => {
const imageRef = useRef(null);
const handleWheel = e => {
imageRef.current.style.width = `${imageRef.current.offsetWidth + e.deltaY}px`;
};
useEffect(() => {
imageRef.current.addEventListener("wheel", handleWheel);
return () => {
imageRef.current.removeEventListener("wheel", handleWheel);
};
}, []);
return <img ref={imageRef} src="myImage.jpg" alt="My Image" />;
};
export default ImageViewer;
这段代码中，我们使用 useRef 来获取图片 DOM 节点，然后通过 addEventListener 来监听 wheel 事件，并定义 handleWheel 方法来处理滚动事件，在滚动时，调整图片的宽度。
合成事件的优势
- 提供了一致的事件处理接口，使得编写代码时可以更加轻松；
- 能够跨多个浏览器保持一致的行为，这样可以大大减少兼容性问题；
- 可以在没有 DOM 的环境下使用，比如 React Native；
- 提供了对事件的统一的管理，可以及时的取消事件处理器等等。
网友评论