首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React事件冒泡:查找目标组件

React事件冒泡是指在React组件中,当一个事件被触发时,它会沿着组件树向上冒泡传递,直到达到根组件或者某个组件阻止了事件继续冒泡为止。这种事件冒泡机制使得在React中处理事件变得更加灵活和方便。

React事件冒泡的过程如下:

  1. 当某个组件上触发了一个事件,比如点击事件,React会将该事件封装成一个合成事件对象。
  2. 事件对象会首先在当前组件上触发,并执行对应的事件处理函数。
  3. 然后事件会继续向上冒泡传递到父组件,再触发对应的事件处理函数。
  4. 这个过程会一直重复,直到达到根组件或者某个组件阻止了事件继续冒泡。

React事件冒泡的优势:

  1. 灵活性:通过事件冒泡机制,可以在父组件中统一处理多个子组件的相同事件,避免了重复的代码。
  2. 组件通信:事件冒泡可以实现组件之间的通信,子组件可以通过触发事件并冒泡到父组件,从而传递数据或者触发父组件的相应操作。

React事件冒泡的应用场景:

  1. 表单验证:可以在父组件中监听子组件的表单提交事件,并进行表单验证操作。
  2. 状态管理:可以通过事件冒泡将子组件的状态传递给父组件,实现状态的统一管理。
  3. UI交互:可以在父组件中监听子组件的点击事件,实现对应的UI交互效果。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,满足各种计算需求。产品介绍链接
  • 腾讯云云数据库MySQL版:提供高性能、可扩展的MySQL数据库服务。产品介绍链接
  • 腾讯云云函数(SCF):无服务器的事件驱动型计算服务,帮助开发者更轻松地构建和管理应用程序。产品介绍链接
  • 腾讯云人工智能平台(AI Lab):提供丰富的人工智能服务和工具,包括图像识别、语音识别、自然语言处理等。产品介绍链接
  • 腾讯云物联网套件(IoT Hub):提供全面的物联网解决方案,帮助用户快速构建和管理物联网应用。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React组件&事件

React(二) 创建组件 函数组件 函数组件:使用JS的函数或者箭头函数创建的组件 使用 JS 的函数(或箭头函数)创建的组件,叫做函数组件 约定1:函数名称必须以大写字母开头,React 据此区分组件和普通的...导包 import React from "react" import ReactDom from 'react-dom/client' // 函数组件 没有状态 仅仅做一些数据展示的工作,可以使用函数组件...导包 import React from "react" import ReactDom from 'react-dom/client' // 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件...注册事件 语法:on+事件名={事件处理程序} 比如onClick={this.handleClick} // 1....导包 import React from "react" import ReactDom from 'react-dom/client' // 类组件 有状态 如果有状态,状态需要切换,更新视图 用类组件

91850

5、React组件事件详解

React组件事件响应 React在构建虚拟DOM的同时,还构建了自己的事件系统;且所有事件对象和W3C规范 保持一致。...); 注意:事件的回调函数被绑定在React组件上,而不是原始的元素上,即事件回调函数中的 this所指的是组件实例而不是DOM元素; 了解更多React中的thisReact组件中的this。...单击触发react事件 React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React...,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 在子元素React合成事件onClick中阻止事件传播,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发 在父元素React合成事件onClick中阻止事件传播,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 子元素React合成事件绑定事件触发

3.7K10
  • React】354- 一文吃透 React 事件机制原理

    合成事件的阻止冒泡不会影响原生事件。 为什么呢?先回忆下浏览器事件机制 ? 浏览器事件的执行需要经过三个阶段,捕获阶段-目标元素阶段-冒泡阶段。...节点上的原生事件的执行是在目标阶段,然而合成事件的执行是在冒泡阶段,所以原生事件会先合成事件执行,然后再往父节点冒泡。 既然原生都阻止冒泡了,那合成还执行个啥嘞。...事件存储 - 就是把 react 组件内的所有事件统一的存放到一个对象里,缓存起来,为了在触发事件的时候可以查找到对应的方法去执行。 ?...关键步骤 上面大致说了事件注册需要完成的两个目标,那完成目标的过程需要经过哪些关键处理呢?...react 把所有的事件事件类型以及react 组件进行关联,把这个关系保存在了一个 map里,也就是一个对象里(键值对),然后在事件触发的时候去根据当前的 组件id和 事件类型查找到对应的 事件fn

    1K21

    【长文慎入】一文吃透 react 事件机制原理

    合成事件的阻止冒泡不会影响原生事件。 为什么呢?先回忆下浏览器事件机制 ? 浏览器事件的执行需要经过三个阶段,捕获阶段-目标元素阶段-冒泡阶段。...节点上的原生事件的执行是在目标阶段,然而合成事件的执行是在冒泡阶段,所以原生事件会先合成事件执行,然后再往父节点冒泡。 既然原生都阻止冒泡了,那合成还执行个啥嘞。...事件存储 - 就是把 react 组件内的所有事件统一的存放到一个对象里,缓存起来,为了在触发事件的时候可以查找到对应的方法去执行。 ?...react 把所有的事件事件类型以及react 组件进行关联,把这个关系保存在了一个 map里,也就是一个对象里(键值对),然后在事件触发的时候去根据当前的 组件id和 事件类型查找到对应的 事件fn...事件合成ing 事件的合成,冒泡的处理以及事件回调的查找都是在合成阶段完成的。 ?

    4.6K91

    React组件事件传参 实现tab切换

    组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind...(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析: 我们首先要创建点击事件的处理函数..., 当按钮被点击时, 将按钮的id作为参数发送给处理函数, 处理函数激活对应当前id的按钮, 并将其余三个按钮调整到未激活状态 实现: 用组件state创建一个含有四个元素的一维数组, 四个元素默认为零..., 但界面中某个按钮被点击时, 组件内处理函数将一维数组内对应元素变为1, 其它元素变为0 效果演示: ?...核心代码: import 'babel-polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; import '.

    1.3K50

    事件机制

    事件传播分为三个阶段: 捕获(Capture):事件对象从window对象传递到目标对象的过程。 目标(target):目标节点在处理事件的过程。...冒泡(Bubble):事件对象从目标对象传递到window对象的过程。 在任一阶段调用stopPropagation都将终止本次事件的传播。 ?...事件代理用到了两个JavaScript事件特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,同样的事件将会在那个元素的所有祖先元素中被触发。...事件注册 React组件组件加载(mount)和更新(update)时,其中的ReactDOMComponent会对传入的事件属性进行处理(_updateDOMProperties),对相关事件进行注册和存储...回调函数的执行分为两步:第一步是把所有的合成事件放到事件队列中,第二步是逐个执行。 常见问题 原生事件阻止冒泡会阻止合成事件的触发,而合成事件的阻止冒泡不影响原生组件

    80111

    React】786- 探索 React 合成事件

    在这个过程中,事件相应的监听函数是不会被触发的。 2. 事件目标 当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。 3....事件冒泡目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被触发一次。...,并在组件卸载(unmount)阶段自动销毁绑定的事件。...合成事件对象在事件池统一管理,不同类型的合成事件具有不同的事件池。 当事件池未满时,React 创建新的事件对象,派发给组件。 当事件池装满时,React事件池中复用事件对象,派发给组件。...在 React 中,一个组件只能绑定一个同类型的事件监听器,当重复定义时,后面的监听器会覆盖之前的。

    1.8K40

    探索 React 合成事件

    在这个过程中,事件相应的监听函数是不会被触发的。 2. 事件目标 当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。 3....事件冒泡目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被触发一次。...在 React 中,“合成事件”会以事件委托(Event Delegation)方式绑定在组件最上层,并在组件卸载(unmount)阶段自动销毁绑定的事件。...合成事件对象在事件池统一管理,不同类型的合成事件具有不同的事件池。 当事件池未满时,React 创建新的事件对象,派发给组件。 当事件池装满时,React事件池中复用事件对象,派发给组件。...在 React 中,一个组件只能绑定一个同类型的事件监听器,当重复定义时,后面的监听器会覆盖之前的。

    4K22

    react源码中的合成事件

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    95840

    细说react源码中的合成事件_2023-02-14

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    34630

    细说react源码中的合成事件_2023-03-15

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    40240

    react源码中的合成事件

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    68870

    细说react源码中的合成事件

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    71730

    细说react源码中的合成事件

    ,捕获阶段-目标元素阶段-冒泡阶段。...Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行,而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了)合成事件特点React...React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React...React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent,不是原生的,这个可以自己去看官网React...Component 及其所有的父组件,然后执行runExtractedPluginEventsInBatch()方法从上面的事件分发中可见,React 自身实现了一套冒泡机制。

    60940

    深度分析React源码中的合成事件_2023-02-13

    root的DOM元素中触发;React自身实现了一套事件冒泡捕获机制;React实现了合成事件SyntheticEvent;React在17版本不再使用事件池了(网上很多说使用了对象池来管理合成事件对象的创建销毁...$1();registerEvents$3();registerEvents();React事件就是在组件中调用的onClick这种写法的事件。...在上面事件合成中讲过,React会根据事件触发的fiber节点向上查找,将上面的同类型事件添加到队列中,这样天然就有了一个冒泡的顺序,从最底层向上冒泡。如果倒序过来遍历就是捕获的顺序。...所以,React实现冒泡和捕获就很简单了,只需要根据事件派发的阶段,判断是冒泡阶段还是捕获阶段来决定是正序遍历listeners还是倒序遍历就行了。...看完这篇文章, 我们可以弄明白下面这几个问题:React事件委托在哪?React合成事件是什么?React合成事件是怎么实现的?React是怎么实现冒泡和捕获的?React合成事件是使用的原生事件吗?

    63060

    深度分析React源码中的合成事件2

    root的DOM元素中触发;React自身实现了一套事件冒泡捕获机制;React实现了合成事件SyntheticEvent;React在17版本不再使用事件池了(网上很多说使用了对象池来管理合成事件对象的创建销毁...$1();registerEvents$3();registerEvents();React事件就是在组件中调用的onClick这种写法的事件。...在上面事件合成中讲过,React会根据事件触发的fiber节点向上查找,将上面的同类型事件添加到队列中,这样天然就有了一个冒泡的顺序,从最底层向上冒泡。如果倒序过来遍历就是捕获的顺序。...所以,React实现冒泡和捕获就很简单了,只需要根据事件派发的阶段,判断是冒泡阶段还是捕获阶段来决定是正序遍历listeners还是倒序遍历就行了。...看完这篇文章, 我们可以弄明白下面这几个问题:React事件委托在哪?React合成事件是什么?React合成事件是怎么实现的?React是怎么实现冒泡和捕获的?React合成事件是使用的原生事件吗?

    64140

    React太劝退,通过anu学合成事件

    anu是什么 anu是司徒正美老师开发的类React框架,他的特点是: 支持React16的各种新功能 跑通官方近800多个单元测试 支持React全家桶 支持99%的antd组件 以上是面向开发者的特点...合成事件是什么、有什么用 合成事件React在浏览器原有捕获->目标->冒泡事件运行机制的基础上重新实现的一套事件运行机制。 为什么要在浏览器事件运行机制之上再重新造轮子呢?...最主要的原因是: 浏览器原生实现中,event触发后会在DOM树中依次完成捕获->目标->冒泡。 在此过程中经过的DOM如果注册了event handler,则handler会被调用。...比如在React中,表单组件的change事件的触发时机其实对标的是原生DOM中的input事件。 再比如在React中,focus事件是由原生DOM中的focusin与focusout实现的。...(),依次调用event handler,模拟冒泡流程 接下来我们以click事件举例: 调用addGlobalEvent('click')注册全局handler用于事件委托。

    63430

    分析React源码中的合成事件

    root的DOM元素中触发;React自身实现了一套事件冒泡捕获机制;React实现了合成事件SyntheticEvent;React在17版本不再使用事件池了(网上很多说使用了对象池来管理合成事件对象的创建销毁...$1();registerEvents$3();registerEvents();React事件就是在组件中调用的onClick这种写法的事件。...在上面事件合成中讲过,React会根据事件触发的fiber节点向上查找,将上面的同类型事件添加到队列中,这样天然就有了一个冒泡的顺序,从最底层向上冒泡。如果倒序过来遍历就是捕获的顺序。...所以,React实现冒泡和捕获就很简单了,只需要根据事件派发的阶段,判断是冒泡阶段还是捕获阶段来决定是正序遍历listeners还是倒序遍历就行了。...看完这篇文章, 我们可以弄明白下面这几个问题:React事件委托在哪?React合成事件是什么?React合成事件是怎么实现的?React是怎么实现冒泡和捕获的?React合成事件是使用的原生事件吗?

    70740

    深度分析React源码中的合成事件_2023-03-01

    id = root的DOM元素中触发; React自身实现了一套事件冒泡捕获机制; React实现了合成事件SyntheticEvent; React在17版本不再使用事件池了(网上很多说使用了对象池来管理合成事件对象的创建销毁...$1(); registerEvents$3(); registerEvents(); React事件就是在组件中调用的onClick这种写法的事件。...在上面事件合成中讲过,React会根据事件触发的fiber节点向上查找,将上面的同类型事件添加到队列中,这样天然就有了一个冒泡的顺序,从最底层向上冒泡。如果倒序过来遍历就是捕获的顺序。...所以,React实现冒泡和捕获就很简单了,只需要根据事件派发的阶段,判断是冒泡阶段还是捕获阶段来决定是正序遍历listeners还是倒序遍历就行了。...看完这篇文章, 我们可以弄明白下面这几个问题: React事件委托在哪? React合成事件是什么? React合成事件是怎么实现的? React是怎么实现冒泡和捕获的?

    62330
    领券