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

Question

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

这看起来很有趣。任何人都可以解释是否有真正的区别。

Answer 1

React 给你 a SyntheticEvent, across-browser wrapper周围的browser\xe2\x80\x99s native event. 它与 browser\xe2\x80\x99s 本机事件具有相同的界面，包括stopPropagation()和preventDefault()，但事件在所有浏览器中的工作方式相同。

\n\n

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

\n\n

合成事件包含以下属性

\n\n

boolean bubbles\nboolean cancelable\nDOMEventTarget currentTarget\nboolean defaultPrevented\nnumber eventPhase\nboolean isTrusted\nDOMEvent nativeEvent\nvoid preventDefault()\nboolean isDefaultPrevented()\nvoid stopPropagation()\nboolean isPropagationStopped()\nDOMEventTarget target\nnumber timeStamp\nstring type\n

\n\n

检查React documentation on Events

\n\n

考虑这个例子，

\n\n

DOMEvent      ReactEvent(Synthetic event)\nonclick       onClick\nonchange      onChange\n

\n

Answer 2

React事件也称为SyntheticEvent。

来自React#SyntheticEvent：

浏览器本地事件的跨浏览器包装。它具有与浏览器本地事件相同的接口，包括stopPropagation（）和preventDefault（），不同之处在于所有浏览器上的事件均相同

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

DOM事件：

除了nativeEvent映射到运行该应用程序的浏览器外，什么都没有。

例如

1. onchange（React具有onChange）

2. onclick（React具有onClick）等。

编辑：

例如使用onclick <IE9

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

其他浏览器（包括IE 9及更高版本）：

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

如我们所见，我们需要一个脚本来处理跨浏览器的兼容性。一个非常流行的库jQuery为克服跨浏览器兼容性问题做了很多这样的事情。

如果您甚至检查jQuery docs或JavaScript（例如，官方docs）以确保不同浏览器的不同API的兼容性，您将很容易地获得事件在所有浏览器中均相同的确切含义。

我摘录了以上摘录here。