React事件和DOM事件有什么区别？

Question

React事件和DOM事件有什么区别？

javascriptreactjs

6

我已经尝试搜索答案，但在互联网上找不到解决方案。

这个问题看起来很有趣。请问是否有人能够解释一下是否存在真正的区别。

- Hemadri Dasari

在哪些例子中我们可以看到不同浏览器之间的行为差异？React 在所有浏览器中的工作方式相同吗？ - G_S

2个回答

6

React为您提供了一个SyntheticEvent，它是一个跨浏览器的封装器，包裹着浏览器的原生事件。它具有与浏览器原生事件相同的接口，包括stopPropagation()和preventDefault()，不同的是这些事件在所有浏览器中的工作方式完全相同。

DOM元素上的原生事件可以通过合成事件中的nativeEvent属性进行访问。

合成事件包含以下属性。

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

请查看React事件文档

考虑以下示例：

DOMEvent      ReactEvent(Synthetic event)
onclick       onClick
onchange      onChange

- Shubham Khatri

1

有没有任何示例可以展示在不同浏览器中看到不同的行为？React 在所有浏览器中都是以相同的方式工作吗？ - G_S

感谢Subham提供详细的解释。 - Hemadri Dasari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RIYAJ KHAN · Accepted Answer

React事件也称为SyntheticEvent。

React#SyntheticEvent中指出:

它是浏览器原生事件的跨浏览器包装器。它具有与浏览器原生事件相同的接口，包括stopPropagation（）和preventDefault（），除了事件在所有浏览器中均以相同方式工作

SyntheticEvent包含nativeEvent，可用于访问特定于浏览器的事件和事件处理机制。

DOM事件:

就是映射到应用程序运行的浏览器中的nativeEvent。

例如：

onchange（React具有onChange）
onclick（React具有onClick）等

编辑:

例如使用onclick < IE9

element.attachEvent('onclick', function() { /* do stuff here*/ });

其他浏览器（包括IE 9及以上版本）：

element.addEventListener('click', function() { /* do stuff here*/ }, false);

如我们所见，我们需要一个脚本来处理跨浏览器兼容性。一种非常受欢迎的库，jQuery，已经做了许多这样的事情，以解决跨浏览器兼容性问题。

如果您查看 jQuery 文档或 JavaScript (例如官方文档) 中不同浏览器的不同 API 的兼容性，您将轻松了解事件在所有浏览器中的工作方式相同指的是什么。

我从此处摘取了上述片段。