Question

我已经尝试过寻找答案，但无法在互联网上找到解决方案。

这看起来非常有趣。任何人都可以解释是否存在真正的差异。

Answer 1

React事件也称为SyntheticEvent。

来自React#SyntheticEvent：

围绕浏览器本机事件的跨浏览器包装器。它具有与浏览器本机事件相同的界面，包括stopPropagation（）和preventDefault（），但事件在所有浏览器中的工作方式相同

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

DOM事件：

除了nativeEvent映射到运行应用程序的浏览器之外，只有

。

e.g。

onchange （ React has onChange ）
onclick （ React on onClick ）等。

编辑：

e.g。使用onclick ＆LT; IE9

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

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

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

正如我们所看到的，我们需要一个脚本来处理跨浏览器的兼容性。一个非常受欢迎的库 jQuery ，已经做了很多这样的事情来克服跨浏览器兼容性问题。

如果您检查jQuery文档或JavaScript（e.g. official docs）以获得不同浏览器的不同API的兼容性，您将轻松了解事件在所有浏览器中的工作方式的确切含义

我从here获取了上述代码段。

Answer 2

React会在SyntheticEvent附近为您提供cross-browser wrapper，browser’s native event。它具有与浏览器本机事件相同的界面，包括stopPropagation()和preventDefault()，但事件在所有浏览器中的工作方式相同。

可以通过合成事件中的native event on DOM element访问nativeEvent attribute。

Synthetic事件包含以下属性

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 documentation on Events

考虑一下这个例子，

DOMEvent      ReactEvent(Synthetic event)
onclick       onClick
onchange      onChange

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

2 个答案: