【React合成事件的原理】

简介: 【React合成事件的原理】

React合成事件是什么?

React 合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。

为什么会有合成事件?

1.将事件绑定在document - v16/容器元素 - v17统一管理,防止很多事件直接绑定在原生的dom元素上。造成一些不可控的情况(对事件进行归类,可以在事件产生的任务上包含不同的优先级)

2.React 想实现一个全浏览器的框架, 为了实现这种目标就需要提供全浏览器一致性的事件系统,以此抹平不同浏览器的差异(提供合成事件对象,抹平浏览器的兼容性差异)

合成事件原理 ?

React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行。

合成事件总结:

  • 合成事件的监听器是统一注册在document上的,且仅有冒泡阶段。所以原生事件的监听器响应总是比合成事件的监听器早
  • 阻止原生事件的冒泡后,会阻止合成事件的监听器执行
相关文章
|
移动开发 前端开发 JavaScript
React 表单与事件
10月更文挑战第10天
201 1
|
10月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
253 57
|
前端开发 JavaScript 开发者
React 事件处理机制详解
【10月更文挑战第23天】本文介绍了 React 的事件处理机制,包括事件绑定、事件对象、常见问题及解决方案。通过基础概念和代码示例,详细讲解了如何处理 `this` 绑定、性能优化、阻止默认行为和事件委托等问题,帮助开发者编写高效、可维护的 React 应用程序。
567 4
|
前端开发 JavaScript IDE
React 事件处理
10月更文挑战第8天
105 1
|
存储 前端开发 测试技术
React Hooks 的工作原理
【10月更文挑战第1天】
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
前端开发 JavaScript
react学习(19)事件处理
react学习(19)事件处理
147 2
|
前端开发 JavaScript
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
269 0
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
843 0
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
470 0