React 事件冒泡

vpants 發布于2019-08-26 13:41 / 923人閱讀

摘要：有些情況下，就需要通過阻止事件冒泡來實現預期的交互效果。下面是幾個簡單的比如有如下的代碼當我們點擊時，控制臺輸出結果這兩個事件都是合成事件，在點擊時，兩個事件會依次冒泡到由統一的事件監聽器處理。這也說明了，合成事件的只能阻止合成事件的冒泡。

在React中，我們可以在創建element的時候，傳入事件和處理函數，這些事件會被做為合成事件來處理，當然，有些時候，我們也需要定義原生事件，比如給document綁定事件。有些情況下，就需要通過阻止事件冒泡來實現預期的交互效果。下面是幾個簡單的demo

Demo

比如有如下的代碼：

import React from "react"
class Demo1 extends React.Component{
    onClickInner(e){
        console.log("inner div")
    }
    onClickOuter(e){
        console.log("outer div")
    }
    render(){
        return 
            inner div
        
    }
}

當我們點擊 inner div時，控制臺輸出結果：

inner div
outer div

這兩個事件都是合成事件，在點擊時，兩個事件會依次冒泡到document,由統一的事件監聽器處理。如果希望阻止onClickOuter 觸發，可以在onClickInner內調用e.stopPropagation()。需要注意的是，這里的e是合成事件實例，調用stopPropagation 也只能阻止合成事件的冒泡。

假如我們將onClickOuter 通過原生事件來綁定：

class App extends React.Component {
    onClickInner(e) {
        e.stopPropagation();
        console.log("inner div");
    }
    onClickOuter(e) {
        console.log("outer div");
    }
    componentDidMount() {
        this.outer.onclick = this.onClickOuter;// 通過DOM 0級綁定
    }
    render() {
        return (
             (this.outer = ref)}>
                123
            
        );
    }
}

雖然在onClickInner內調用了 e.stopPropagation, 但是原生事件還是會通過冒泡來觸發，而且會先于onClickInner，控制臺輸出：

outer div
inner div

這是因為onClickInner合成事件被觸發的時候，說明點擊事件已經通過冒泡傳遞到了document，在這個過程中，便會經過外層的div，進而觸發該原生事件。這也說明了，合成事件的stopPropagation只能阻止合成事件的冒泡。即使我們在這里通過e.nativeEvent獲取到原生事件并調用stopPropagation,也無濟于事，因為上面已經說了，在該合成事件被觸發的時候，已經冒泡到了document.
那么我們該通過什么方式來阻止原生事件onClickOuter被觸發呢：
既然在onClickInner處理不了，只能在onClickOuter內處理了：

onClickOuter(e) {// 這里e是原生事件
   if(e.target && e.target.id === "inner"){
       return ;
   }
   console.log("outer div");
}

如果我們將原生事件綁定在了document上:

class App extends React.Component {
    constructor(props) {
        super(props);
        // this.bindDocument();
    }
    onClickInner(e) {
        console.log("inner div");
    }
    componentDidMount() {
        this.bindDocument();
    }
    bindDocument() {
        document.addEventListener("click", function(e) {
            console.log("document");
        });
    }
    render() {
        return (
            
                123
            
        );
    }
}

上面代碼中，在組件掛載完畢后，再給document綁定click事件，這時候，React合成事件已經注冊完成，當點擊時，document上的click事件會依據綁定順序的先后依次執行，所以控制臺會輸出：

inner div
document

如果希望阻止后綁定的事件觸發，可以在onClickInner內調用stopImmediatePropagation：

如果有多個相同類型事件的事件監聽函數綁定到同一個元素，當該類型的事件觸發時，它們會按照被添加的順序執行。如果其中某個監聽函數執行了 event.stopImmediatePropagation() 方法，則當前元素剩下的監聽函數將不會被執行。

云服務器 GPU云服務器冒泡事件事件冒泡事件冒泡機制阻止冒泡事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109310.html

淺析React之事件系統（二）

摘要：因為阻止事件冒泡的行為只能用于合成事件中，沒法阻止原生事件的冒泡。同時的創建和冒泡是在原生事件冒泡到最頂層的之后的。淺析之事件系統一上篇文章中，我們談到了React事件系統的實現方式，和在React中使用原生事件的方法，那么這篇文章我們來繼續分析下，看看React中合成事件和原生事件混用的各種情況。上一個例子在上篇文章中，我們舉了個例子。為了防止大家不記得，我們來看看那個例子的代...

villainhr 2019-08-20 14:05 評論0 收藏0
窺探react事件

摘要：解決問題為了解決上述問題，先來了解下的事件，事件是合成事件，為原生事件的一個子集，僅僅是進行了一個跨瀏覽器的封裝。參考本文部分參考自事件初探寫在前面本文源于本人在學習react過程中遇到的一個問題；本文內容為本人的一些的理解，如有不對的地方，還請大家指出來。本文是講react的事件，不是介紹其api，而是猜想一下react合成事件的實現方式遇到的問題 class EventTes...

劉厚水 2019-08-20 13:33 評論0 收藏0
結合源碼徹底理解 react事件機制原理 04 - 事件執行

摘要：文章涉及到的源碼是基于版本，雖然不是最新版本但是也不會影響我們對事件機制的整體把握和理解。總結本文主要是從整體流程上介紹了下事件觸發的過程。 showImg(https://segmentfault.com/img/bVbtvI3?w=1048&h=550); 前言這是 react 事件機制的第四節-事件執行，一起研究下在這個過程中主要經過了哪些關鍵步驟，本文也是react 事件機制...

marser 2019-08-23 17:57 評論0 收藏0
【React深入】React事件機制

摘要：給注冊原生事件回調為統一的事件分發機制。根據元素唯一標識和事件類型從中取出回調函數返回帶有合成事件參數的回調函數總流程將上面的四個流程串聯起來。可見，回調函數是直接調用調用的，并沒有指定調用的組件，所以不進行手動綁定的情況下直接獲取到的是。關于React事件的疑問 1.為什么要手動綁定this 2.React事件和原生事件有什么區別 3.React事件和原生事件的執行順序，可以混...

philadelphia 2019-08-23 15:39 評論0 收藏0
《深入react技術棧》學習筆記（三）漫談React

摘要：前言接下來讓我們進入新的章節漫談。正文一事件系統的事件系統事件系統符合標準，不存在任何兼容性問題，并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動綁定到最外層。組織事件冒泡的行為只適用于合成系統中，且沒辦法阻止原生事件冒泡。前言接下來讓我們進入新的章節：漫談React。本篇文章主要講React事件系統和表單操作。正文一：事件系統 1.react的事件系統react事件系...

isLishude 2019-08-21 11:38 評論0 收藏0