## DOM 事件 ### DOM 事件流 * 捕获阶段 * 目标阶段 * 冒泡阶段  ### 阻止冒泡 * cancelBubble * stopPropagation ``` function stopPropagation( event ) { // IE if( !event ){ window.event.cancelBubble = true } if( event.stopPropagation ){ event.stopPropagation() } } ``` ## 阻止事件默认行为 * returnValue * preventDefault ``` function preventDefault( event ) { // IE if( !event ){ window.event.returnValue = true } if( event.preventDefault ){ event.preventDefault() } } ``` ### 事件代理 * 也就是事件委托， 委托给父元素进行事件监听 * 利用事件冒泡来实现 * 能够减少事件注册，节省内存  ## react 事件机制 * 事件注册 * 事件绑定 * 事件触发 ### 事件注册 我们先提出以下疑问： * [ ] onClick 是如何注册到React事件系统中的？ * [ ] 原生事件 click 和 合成事件 onClick 是如何对应起来的？ * [ ] 事件注册到哪里？ 1. react 一开始就把事件委托到根节点上去了  **绑定前的疑问**🤔️ * 所有支持的事件是什么事件 * 这些事件是在哪里定义的，是用户传入的吗  #### 总结 1. onClick 是如何注册到React事件系统中的？ 在事件注册时，注册的是原生事件，不是合成事件，onClick 属于合成事件  2. 原生事件 click 和 合成事件 onClick 是如何对应起来的？ 在 react 事件注册时，react 提供了一个数组 discreteEventPairsForSimpleEventPlugin，存储了简单事件，遍历discreteEventPairsForSimpleEventPlugin，生成合成事件名（onClick），存储在一个 Map 集合中   3. 所有支持的事件  4. 事件注册在 v17 之前是绑定在 document 上的，在 v17 改成了 app 容器上 ### 事件绑定 * 判断需要代理和不需要代理（cancel、close、load）的事件 * 需要代理的事件，绑定捕获和冒泡 * 不需要代理的事件，只绑定捕获事件 * 对这些事件使用 addEventListener 进行事件绑定  ### 事件触发 * [ ] 合成事件 onClick存在哪里，是如何被触发的？😌  Fiber树：  #### 总结： 1. 合成事件函数 handleDivClick ，handleDivClickCapture 存在对应 DOM 元素类型 fiber 对象中。  2. fiber 对象和dom的关系  ## 合成事件 * 兼容不同浏览器 * 跨端和服务端渲染 * 支持冒泡 ### 对于合成的理解 1. 对原生事件的封装 ( e 不是原生事件对象，而是 react包装过的对象，  原生事件对象被放在了属性e.nativeEvent)  2. 对原生事件的升级和改造 当我们给input声明个onChange事件，可以看到react不只是注册了一个onchange事件，还注册了很多其他事件。 额外的增加一些其他的事件，帮助我们提升交互的体验。 3. 阻止冒泡：e.stopPropagation() 4. 阻止默认行为：e.preventDefault() 5. 合成事件系统只是 DOM 事件系统的一个子集  ### 在 react 中使用原生事件