react的合成事件是什么

本篇内容介绍了“react的合成事件是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！React合成事件是React模拟原生DOM事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器；它根据W3C规范来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。在React中，所有事件都是合成的，不是原生DOM事件，但可以通过“e.nativeEvent”属性获取DOM事件。React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等在React中这套事件机制被称之为合成事件合成事件（SyntheticEvent）React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范免费云主机、域名 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。例如在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以通过 e.nativeEvent 属性获取 DOM 事件。 比如：从上面可以看到React事件和原生事件也非常的相似，但也有一定的区别：事件名称命名方式不同事件处理函数书写不同虽然onclick看似绑定到DOM元素上，但实际并不会把事件代理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件去监听。这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制，效率也有很大提升。关于React合成事件与原生事件执行顺序，可以看看下面一个例子：输出顺序为：可以得出以下结论：React 所有事件都挂载在 document 对象上当真实 DOM 元素触发事件，会冒泡到 document 对象后，再处理 React 事件所以会先执行原生事件，然后处理 React 事件最后真正执行 document 上挂载的事件对应过程如图所示：所以想要阻止不同时间段的冒泡行为，对应使用不同的方法，对应如下：阻止合成事件间的冒泡，用e.stopPropagation()阻止合成事件与最外层 document 上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation()阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免“react的合成事件是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站，小编将为大家输出更多高质量的实用文章！

相关推荐: 怎么使用jQuery实现简单的流程显示

这篇文章主要介绍了怎么使用jQuery实现简单的流程显示的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用jQuery实现简单的流程显示文章都会有所收获，下面我们一起来看看吧。 jQuery是一个非常流行的JavaScript…