React中的合成事件怎么实现

这篇文章主要介绍了React中的合成事件怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇React中的合成事件怎么实现文章都会有所收获，下面我们一起来看看吧。

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 (      <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;

执行顺序

只留子元素修改代码

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;

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 (      <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原生事件冒泡，并不能阻止自己和父元素原生事件的冒泡。

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 (      <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;

执行顺序

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

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

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;

执行顺序

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

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

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

关于“React中的合成事件怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“React中的合成事件怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。