React中的合成事件

01116

1 事件三个阶段 捕获、目标、处理 （具体百度，后面有空补全）

2 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from "react";
 
class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}
 
export default Test;

执行顺序

图片[1]-React中的合成事件-爱站

只留子元素修改代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import React from "react";
 
class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    // this.parentRef.current.addEventListener(
    //   "click",
    //   () => {
    //     console.log(`父元素原生事件捕获`);
    //   },
    //   true
    // );
    // this.parentRef.current.addEventListener("click", () => {
    //   console.log(`父元素原生事件冒泡`);
    // });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  // handleParentBubble = () => {
  //   console.log(`父元素React事件冒泡`);
  // };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  // handleParentCapture = () => {
  //   console.log(`父元素React事件捕获`);
  // };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.childRef}
        onClick={this.handleChildBubble}
        onClickCapture={this.handleChileCapture}
      >
        事件处理测试
      </div>
    );
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}
 
export default Test;

图片[2]-React中的合成事件-爱站

document原生事件捕获–》子元素React事件捕获–》子元素原生事件捕获–》子元素原生事件冒泡–》子元素React事件冒泡–》document原生事件冒泡

从这个执行顺序来看，react事件捕获执行比原生事件捕获早，但是原生事件冒泡执行比react事件冒泡快。

所有的react捕获事件执行完毕之后才会去执行原生的捕获事件（document原生事件捕获最先执行）

3 子元素阻止react事件冒泡

e.stopPropagation();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from "react";
 
class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", () => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    e.stopPropagation();
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}
 
export default Test;

执行顺序

e.stopPropagation()只能阻止react合成事件的冒泡和document原生事件冒泡，并不能阻止自己和父元素原生事件的冒泡。

图片[3]-React中的合成事件-爱站

e.nativeEvent.stopImmediatePropagation()只能阻止document原生事件冒泡。

图片[4]-React中的合成事件-爱站

e.preventDefault()和不执行一样

图片[5]-React中的合成事件-爱站

e.nativeEvent.stopPropagation()只能阻止document原生事件冒泡。

图片[6]-React中的合成事件-爱站

如果我们在子原生的原声事件里面阻止冒泡，都阻止了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from "react";
 
class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", () => {
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}
 
export default Test;

执行顺序

图片[7]-React中的合成事件-爱站

在子元素的原声事件里面，阻止了所有的冒泡。同时也阻止了react事件。

在父元素原生事件中阻止冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import React from "react";
 
class Test extends React.Component {
  parentRef;
  childRef;
  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    document.addEventListener(
      "click",
      () => {
        console.log(`document原生事件捕获`);
      },
      true
    );
    document.addEventListener("click", () => {
      console.log(`document原生事件冒泡`);
    });
    this.parentRef.current.addEventListener(
      "click",
      () => {
        console.log(`父元素原生事件捕获`);
      },
      true
    );
    this.parentRef.current.addEventListener("click", (e) => {
      e.stopPropagation();
      console.log(`父元素原生事件冒泡`);
    });
    this.childRef.current.addEventListener(
      "click",
      () => {
        console.log(`子元素原生事件捕获`);
      },
      true
    );
    this.childRef.current.addEventListener("click", (e) => {
      console.log(`子元素原生事件冒泡`);
    });
  }
  handleParentBubble = () => {
    console.log(`父元素React事件冒泡`);
  };
  handleChildBubble = (e) => {
    console.log(`子元素React事件冒泡`);
  };
  handleParentCapture = () => {
    console.log(`父元素React事件捕获`);
  };
  handleChileCapture = () => {
    console.log(`子元素React事件捕获`);
  };
  render() {
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件处理测试
        </div>
      </div>
    );
  }
}
 
export default Test;

执行顺序

图片[8]-React中的合成事件-爱站

父元素原生事件中阻止冒泡阻止了react事件

阻止document原生事件的冒泡并不会阻止了react事件

1
2
3
4
document.addEventListener("click", (e) => {
     e.stopPropagation();
     console.log(`document原生事件冒泡`);
});

图片[9]-React中的合成事件-爱站

结论

react捕获事件快于原生捕获事件的执行

react冒泡事件慢于原生冒泡事件的执行

原生冒泡事件会阻止react事件。

原文链接：https://blog.csdn.net/qq_33715850/article/details/129101129

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
JavaScript技术
喜欢就支持一下吧
点赞6 分享
2站编辑的头像-爱站
中国高清Windows在线：畅享高质量的数字内容-爱站
中国高清Windows在线：畅享高质量的数字内容
中国高清Windows在线：畅享高质量的数字内容
2年前 2.2W+
pr18九天狐-爱站
pr18九天狐
pr18九天狐
2年前 6133
Windows不能更改密码：可能原因及解决方法-爱站
Windows不能更改密码：可能原因及解决方法
Windows不能更改密码：可能原因及解决方法
2年前 2542
Windows自动更新——让你的系统始终更新-爱站
Windows自动更新——让你的系统始终更新
Windows自动更新——让你的系统始终更新
2年前 823
安卓手机应用 快速连拍相机 Fast Burst Camera v4.0.3 汉化版-爱站
安卓手机应用 快速连拍相机 Fast Burst Camera v4.0.3 汉化版
安卓手机应用 快速连拍相机 Fast Burst Camera v4.0.3 汉化版
2年前 817
Windows 11安装助手：简单高效的系统升级工具-爱站
Windows 11安装助手：简单高效的系统升级工具
Windows 11安装助手：简单高效的系统升级工具
2年前 809
相关推荐
详细解析layui和bootstrap区别-爱站
详细解析layui和bootstrap区别
详细解析layui和bootstrap区别
3年前 1236
有关bootstrap模板如何免费下载的教程-爱站
有关bootstrap模板如何免费下载的教程
有关bootstrap模板如何免费下载的教程
3年前 1091
vue3使用vue3-print-nb实现区域打印功能-爱站
vue3使用vue3-print-nb实现区域打印功能
vue3使用vue3-print-nb实现区域打印功能
2年前 474
有关bootstrap模板如何免费下载-爱站
有关bootstrap模板如何免费下载
有关bootstrap模板如何免费下载
3年前 448
element中drawer模板的实现-爱站
element中drawer模板的实现
element中drawer模板的实现
2年前 418
关于bootstraplayoutit如何使用-爱站
关于bootstraplayoutit如何使用
关于bootstraplayoutit如何使用
3年前 416
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容

大网数据活动，500M云服务器68元/月，800G高防服务器399元-爱站
186人已阅读
大网数据活动，500M云服务器68元/月，800G高防服务器399元
TOP1
React渲染机制及相关优化方案-爱站
React渲染机制及相关优化方案
2年前209人已阅读
TOP2
Vue分别运用class绑定和style绑定通过点击实现样式切换-爱站
Vue分别运用class绑定和style绑定通过点击实现样式切换
2年前205人已阅读
TOP3
vue .then和链式调用操作方法-爱站
vue .then和链式调用操作方法
2年前207人已阅读
TOP4
JavaScript sort方法实现数组升序降序-爱站
JavaScript sort方法实现数组升序降序
2年前174人已阅读
TOP5
JS var let声明范围区别-爱站
JS var let声明范围区别
2年前180人已阅读
TOP6
2站编辑的头像-爱站
2站小编的头像-爱站
源码小编的头像-爱站
2站的头像-爱站
  • 2站的头像-爱站
  • 2站等级-LV1-爱站
    这家伙很懒，什么都没有写...
大网数据的头像-爱站
不问的头像-爱站
Xiaom的头像-爱站
创梦流浪人的头像-爱站
2站招聘版主及网站编辑数名，有意者加群联系
2站站长交流QQ群：732650774

1大网数据活动，500M云服务器68元/月，800G高防服务器399元

2React渲染机制及相关优化方案

3Vue分别运用class绑定和style绑定通过点击实现样式切换

4vue .then和链式调用操作方法

5JavaScript sort方法实现数组升序降序

6JS var let声明范围区别

7react hooks的类型声明

8element中drawer模板的实现

9云闪付 v8.1.4

10穷游锦囊 2.3.2

11多米音乐安卓版 6.9.2.01

12大网数据2023年国庆限时秒杀抢购专场

13ICP备案查询系统发布-带安装教程最新版本

14e路乘客下载 v1.0.2

15在线作文大全下载 v19.11.04

16萝卜专线下载 v5.2.0

17淘牛易购下载 v1.0.2

18灯惠多 1.6

19宠物市场下载 v4.0

20奇葩购下载 v4.0.5