React如何实现自己的事件机制？

React 事件并没有绑定在真实的 Dom节点上，而是通过事件代理，在最外层的 document上对事件进行统一分发。

组件挂载、更新时：

• 通过 lastProps、 nextProps判断是否新增、删除事件分别调用事件注册、卸载方法。
• 调用 EventPluginHub的 enqueuePutListener进行事件存储
• 获取 document对象。
• 根据事件名称（如 onClick、 onCaptureClick）判断是进行冒泡还是捕获。
• 判断是否存在 addEventListener方法，否则使用 attachEvent（兼容 IE）。
• 给 document注册原生事件回调为 dispatchEvent(统一的事件分发机制）。

事件初始化：

• EventPluginHub负责管理 React合成事件的 callback，它将 callback存储在 listenerBank中，另外还存储了负责合成事件的 Plugin。
• 获取绑定事件的元素的唯一标识 key。
• 将 callback 根据事件类型，元素的唯一标识 key存储在 listenerBank中。
• listenerBank的结构是： listenerBank[registrationName][key]。

触发事件时：

• 触发 document注册原生事件的回调 dispatchEvent
• 获取到触发这个事件最深一级的元素
• 遍历这个元素的所有父元素，依次对每一级元素进行处理。
• 构造合成事件。
• 将每一级的合成事件存储在 eventQueue事件队列中。
• 遍历 eventQueue。
• 通过 isPropagationStopped判断当前事件是否执行了阻止冒泡方法。
• 如果阻止了冒泡，停止遍历，否则通过 executeDispatch执行合成事件。
• 释放处理完成的事件。

React 在自己的合成事件中重写了 stopPropagation方法，将 isPropagationStopped设置为 true，然后在遍历每一级事件的过程中根据此遍历判断是否继续执行。这就是 React 自己实现的冒泡机制。

以上关于React如何实现自己的事件机制？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。