【React合成事件的原理】

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

React合成事件是什么?

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

为什么会有合成事件?

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

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

合成事件原理 ?

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

合成事件总结:

  • 合成事件的监听器是统一注册在document上的,且仅有冒泡阶段。所以原生事件的监听器响应总是比合成事件的监听器早
  • 阻止原生事件的冒泡后,会阻止合成事件的监听器执行
目录
打赏
0
0
0
0
1
分享
相关文章
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
176 57
React 表单与事件
10月更文挑战第10天
117 1
React 事件处理机制详解
【10月更文挑战第23天】本文介绍了 React 的事件处理机制,包括事件绑定、事件对象、常见问题及解决方案。通过基础概念和代码示例,详细讲解了如何处理 `this` 绑定、性能优化、阻止默认行为和事件委托等问题,帮助开发者编写高效、可维护的 React 应用程序。
429 4
React 事件处理
10月更文挑战第8天
68 1
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
一文详解React事件中this指向,面试必备
一文详解React事件中this指向,面试必备
195 0
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
202 68
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
182 67
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问