react合成事件和DOM原生事件的区别

事件流

在了解事件之前先来看一下什么是事件流。
'流’这个名词在JS中随处可见。像DOM事件流、React中的数据流等等。
其实，流就是一种有方向的数据；事件流，是页面接受事件的顺序。

一、DOM事件流的三个阶段

1、事件捕获阶段

当某个事件触发时，文档根节点最先接受到事件，然后根据DOM树结构向具体绑定事件的元素传递。该阶段为父元素截获事件提供了机会。
事件传递路径为：
window —> document —> boy —> button

2、目标阶段

具体元素已经捕获事件。之后事件开始想根节点冒泡。

3、事件冒泡阶段

该阶段的开始即是事件的开始，根据DOM树结构由具体触发事件的元素向根节点传递。
事件传递路径：
button —> body —> document —> window

4、选择监听事件的阶段

使用addEventListener函数在事件流的的不同阶段监听事件。
DOMEle.addEventListener(‘事件名称’,handleFn,Boolean);
此处第三个参数Boolean即代表监听事件的阶段；
为true时，在在捕获阶段监听事件，执行逻辑处理；
为false时，在冒泡阶段监听事件，执行逻辑处理。

二、react合成事件

1、合成事件原理

如果react事件绑定在了真实DOM节点上，一个节点同事有多个事件时，
页面的响应和内存的占用会受到很大的影响。因此SyntheticEvent作为
中间层出现了。
事件没有在目标对象上绑定，而是在document上监听所支持的所有事件，当事件发生并冒泡至document时，react将事件内容封装并叫由真正的处理函数运行。

2、绑定方式

绑定事件的属性名是采用驼峰形式的；
事件处理函数是一个函数，而不是像原生事件那样的函数名称；

<div onClick={this.handleClick}>点我呀！</div>

React合成事件理解

如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。

1.当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。
2.而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件合成）
3.所以当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。

React合成事件的冒泡并不是真的冒泡，而是节点的遍历。