欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入了解React中的合成事件

 更新時(shí)間：2023年02月20日 10:59:01   作者：跑跑快跑  
React 中的事件，是對(duì)原生事件的封裝，叫做合成事件。這篇文章主要通過(guò)幾個(gè)簡(jiǎn)單的示例為大家詳細(xì)介紹一下React中的合成事件，感興趣的可以了解一下

1 事件三個(gè)階段 捕獲、目標(biāo)、處理 （具體百度，后面有空補(bǔ)全）

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}
        >
          事件處理測(cè)試
        </div>
      </div>
    );
  }
}
 
export default Test;

執(zhí)行順序

只留子元素修改代碼

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}
      >
        事件處理測(cè)試
      </div>
    );
    return (
      <div
        ref={this.parentRef}
        onClick={this.handleParentBubble}
        onClickCapture={this.handleParentCapture}
      >
        <div
          ref={this.childRef}
          onClick={this.handleChildBubble}
          onClickCapture={this.handleChileCapture}
        >
          事件處理測(cè)試
        </div>
      </div>
    );
  }
}
 
export default Test;

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

從這個(gè)執(zhí)行順序來(lái)看，react事件捕獲執(zhí)行比原生事件捕獲早，但是原生事件冒泡執(zhí)行比react事件冒泡快。

所有的react捕獲事件執(zhí)行完畢之后才會(huì)去執(zhí)行原生的捕獲事件（document原生事件捕獲最先執(zhí)行）

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}
        >
          事件處理測(cè)試
        </div>
      </div>
    );
  }
}
 
export default Test;

執(zhí)行順序

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

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

e.preventDefault()和不執(zhí)行一樣

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

如果我們?cè)谧釉脑暿录锩孀柚姑芭?，都阻止了?/p> 

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}
        >
          事件處理測(cè)試
        </div>
      </div>
    );
  }
}
 
export default Test;

執(zhí)行順序

在子元素的原聲事件里面，阻止了所有的冒泡。同時(shí)也阻止了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}
        >
          事件處理測(cè)試
        </div>
      </div>
    );
  }
}
 
export default Test;

執(zhí)行順序

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

阻止document原生事件的冒泡并不會(huì)阻止了react事件

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

結(jié)論

react捕獲事件快于原生捕獲事件的執(zhí)行

react冒泡事件慢于原生冒泡事件的執(zhí)行

原生冒泡事件會(huì)阻止react事件。

以上就是深入了解React中的合成事件的詳細(xì)內(nèi)容，更多關(guān)于React合成事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • React+Antd+Redux實(shí)現(xiàn)待辦事件的方法

    React+Antd+Redux實(shí)現(xiàn)待辦事件的方法

    這篇文章主要介紹了React+Antd+Redux實(shí)現(xiàn)待辦事件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程

    React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程

    ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒(méi)有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫(kù),本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • 基于React-Dropzone開(kāi)發(fā)上傳組件功能(實(shí)例演示)

    基于React-Dropzone開(kāi)發(fā)上傳組件功能(實(shí)例演示)

    這篇文章主要介紹了基于React-Dropzone開(kāi)發(fā)上傳組件,主要講述的是在React-Flask框架上開(kāi)發(fā)上傳組件的技巧，需要的朋友可以參考下
    2021-08-08
  • 解決React報(bào)錯(cuò)Expected an assignment or function call and instead saw an expression

    解決React報(bào)錯(cuò)Expected an assignment or funct

    這篇文章主要為大家介紹了React報(bào)錯(cuò)Expected an assignment or function call and instead saw an expression解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • 詳解React中組件之間通信的方式

    詳解React中組件之間通信的方式

    這篇文章主要介紹了React中組件之間通信的方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-07-07
  • React Router6.x路由表封裝的兩種寫(xiě)法

    React Router6.x路由表封裝的兩種寫(xiě)法

    本文主要介紹了React Router6.x路由表封裝的兩種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • React Redux應(yīng)用示例詳解

    React Redux應(yīng)用示例詳解

    這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫(xiě)的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下
    2022-11-11
  • React中state屬性和生命周期的使用

    React中state屬性和生命周期的使用

    這篇文章主要介紹了React中state屬性和生命周期的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-02-02
  • React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例

    React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例

    本文給大家介紹了React實(shí)現(xiàn)翻頁(yè)時(shí)鐘的代碼示例,翻頁(yè)時(shí)鐘把數(shù)字分為上下兩部分,翻頁(yè)效果的實(shí)現(xiàn)需要通過(guò)設(shè)置 position 把所有的數(shù)組放在同一個(gè)位置疊加起來(lái),文中有詳細(xì)的代碼講解,需要的朋友可以參考下
    2023-08-08
  • 解析react?函數(shù)組件輸入卡頓問(wèn)題?usecallback?react.memo

    解析react?函數(shù)組件輸入卡頓問(wèn)題?usecallback?react.memo

    useMemo是一個(gè)react hook,我們可以使用它在組件中包裝函數(shù)?？梢允褂盟鼇?lái)確保該函數(shù)中的值僅在依賴(lài)項(xiàng)之一發(fā)生變化時(shí)才重新計(jì)算，這篇文章主要介紹了react?函數(shù)組件輸入卡頓問(wèn)題?usecallback?react.memo,需要的朋友可以參考下
    2022-07-07

最新評(píng)論