在 React 中，事件对象是一种特殊类型的合成事件对象。与原生 DOM 事件对象不同，React 合成事件对象具有很多便利和增强功能，例如：自动进行跨浏览器兼容性处理、可重用性高、能够方便地与 React 组件及其生命周期相结合。
在本篇文章中，我们将探讨 React 合成事件对象与原生 DOM 事件对象之间的主要差异。
1. 合成事件对象的属性与方法
与原始事件对象不同，React 合成事件对象具有以下属性和方法：
属性
target：事件的目标元素，与原始事件对象的target属性不同，它是一个 React 组件的实例，而不是一个 DOM 元素。currentTarget：当前事件目标，在 React 中与原始事件对象的target一样，它是事件所在的最内层的父组件。type：事件的类型。nativeEvent：原始事件对象。
方法
stopPropagation()：阻止事件冒泡。preventDefault()：阻止默认的行为（例如，点击链接时打开新的页面）。
2. 事件委托
在 React 中，事件委托很方便。你可以在组件的根元素上监听事件，然后根据事件的类型、目标元素等条件进行处理。
假设我们有一个简单的组件：
function MyButton(props) {
function handleClick() {
console.log('Button clicked');
}
return <button onClick={handleClick}>{props.text}</button>;
}如果我们想在点击该按钮时打印日志，则可以在该组件的父组件上监听 click 事件。我们可以这样写：
-- -------------------- ---- -------
-------- ----- -
-------- ------------------ - -- --- ----- ------------
---------------- ------- --- ----------------------------- ----------
-
------ -
---- ----------------------
--------- ------------ -- --
--------- ------------ -- --
--------- ------------ -- --
------
--
-在这个示例中，我们没有把 handleClick 传递给每个单独的按钮。相反，我们在 div 上监听 click 事件，这使得我们可以在一个地方处理所有按钮的点击事件。
3. 事件的处理顺序
React 可以为同一事件注册多个处理函数，多个处理函数将以它们注册的顺序依次执行。
例如，我们可以在 button 上注册两个事件处理函数：
-- -------------------- ---- -------
-------- --------------- -
-------- ------------------- -
------------------ ----
-
-------- ------------------- -
------------------ ----
-
------ -
------- ---------------------- ------------------------------
------------
---------
--
-在这个示例中，我们在组件的 button 元素上注册了两个处理函数。第一个处理函数 handleClick1 是在 button 元素上处理单击事件。第二个处理函数 handleClick2 是在 button 的父元素上处理冒泡事件。当用户单击按钮时，React 会首先触发 handleClick1，然后再触发 handleClick2。
4. 使用 Refs 和事件对象
有时，我们需要在事件处理函数中访问 DOM 元素。通常，我们可以使用 React 的 Refs 功能来实现。
假设我们有一个 input 元素，我们希望在用户完成输入后获取其 value：
function MyInput(props) {
function handleChange(event) {
console.log('Input value:', event.target.value);
}
return <input type="text" onChange={handleChange} />;
}在这个示例中，我们使用 onChange 事件来监听输入的每个字符。当用户完成输入后，我们可以在事件处理函数中访问事件合成对象中的 target.value 属性。
结论
与原始的 DOM 事件对象不同，React 的合成事件对象具有很多便利和增强功能，例如：自动进行跨浏览器兼容性处理、可重用性高、能够方便地与 React 组件及其生命周期相结合。在你编写事件处理函数时，最好充分利用这些合成事件对象的优点。
以上就是有关 React 中的事件对象与原生事件对象的差异的详细介绍和示例代码，希望对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f514ccc5c563ced56c13d3