A continuación, comparamos los eventos sintéticos de React y los eventos nativos de JavaScript desde 4 aspectos.
1. Propagación de eventos y prevención de la propagación de eventos La propagación de
eventos DOM nativos del navegador se puede dividir en tres etapas: etapa de captura de eventos, donde el objeto de destino inserta la
llamada al controlador de eventos de la pieza de código en sí, y propagación de eventos .
La captura de eventos primero llamará al detector de eventos vinculado al elemento más externo del árbol de estructura, y luego lo
llamará hacia adentro, hasta que se llame al detector de eventos en el elemento de destino. Puede
registrar un controlador de eventos de captura para el elemento e cuando el tercer parámetro de e.addEventListener () se establece en verdadero y llamarlo en la primera etapa de la propagación del evento.
Además, la captura de eventos no es una tecnología universal y no se puede utilizar en navegadores inferiores a IE9. El burbujeo de eventos es
contrario al rendimiento de la captura de eventos, ya que propagará el evento desde el elemento objetivo hacia afuera, desde adentro hacia afuera hasta la capa más externa.
Se puede ver que la captura de eventos tiene poca importancia en el desarrollo de programas y el problema más mortal es su compatibilidad. Por lo tanto,
el evento sintético de React no implementa la captura de eventos 仅仅支持了事件冒泡机制. Este método de diseño de API es unificado y conciso, de
acuerdo con los "28 principios".
Para evitar la propagación de eventos nativos, debe usar e.preventDefault (), pero para los navegadores que no admiten este método (por debajo de IE9
), solo puede usar e.preventDefault ()用 e.cancelBubble = true 来阻止。
En React sintéticos eventos, solo necesita usar e.preventDefault ().
Qué es un evento sintético :
Virtual DOM 在内存中是以对象的形式存在的，如果想要在这些对象上添加事件，就会非常
简单。React 基于 Virtual DOM 实现了一个 SyntheticEvent （合成事件）层，我们所定义的事件
处理器会接收到一个 SyntheticEvent 对象的实例，它完全符合 W3C 标准，不会存在任何 IE 标
准的兼容性问题。并且与原生的浏览器事件一样拥有同样的接口，同样支持事件的冒泡机制，我
们可以使用 stopPropagation() 和 preventDefault() 来中断它。
所有事件都自动绑定到最外层上。如果需要访问原生事件对象，可以使用 nativeEvent 属性。
-
Tipos de eventos Los tipos de
eventos de los eventos sintéticos de React son un subconjunto de los tipos de eventos nativos de JavaScript. -
Método de vinculación de eventos
受到 DOM 标准的影响，绑定浏览器原生事件的方式也有很多种，具体如下所示。
直接在 DOM 元素中绑定：
<button onclick="alert(1);">Test</button> 在 JavaScript 中，通过为元素的事件属性赋值的方式实现绑定：
el.onclick = e => {
console.log(e); }
通过事件监听函数来实现绑定：
el.addEventListener('click', () => {
}, false);
el.attachEvent('onclick', () => {
});
**相比而言，React 合成事件的绑定方式则简单得多：**
<button onClick={
this.handleClick}>Test</button>
4. Objetos de eventos Los objetos de eventos del
DOM nativo son diferentes según los estándares W3C y los estándares IE. En la versión baja del navegador IE, puede
usar window.eventpara obtener el objeto de evento. En el sistema de eventos sintéticos React, no existe tal problema de compatibilidad, y
se puede obtener un objeto de evento sintético en la función de procesamiento de eventos .