• 首页
• 编程开发
• 正文

React 合成事件理解

创始人

2024-05-26 06:18:46

0次

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

2

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 (事件处理测试

);} }export default Test;

执行顺序

只留子元素修改代码

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 (事件处理测试

);return (事件处理测试

);} }export default Test;

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

--》子元素React事件冒泡--》document原生事件冒泡

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

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

3 子元素阻止react事件冒泡

e.stopPropagation();

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 (事件处理测试

执行顺序

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

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

e.preventDefault()和不执行一样

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

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

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 (事件处理测试