react事件代理

參考：https://github.com/youngwind/blog/issues/107

首先回顧以下原生事件的兩個方法：event.stopImmediatePropagation 和 event.stopPropagation ，前者可以阻止同一dom上的后續事件的執行以及阻止冒泡，后者僅能阻止冒泡。

測試如下：

默認情況下點擊內部的div，會依次顯示inner click1、inner click2、root click，這是因為以下事件是綁定在了冒泡階段

    <div id="root">
        外部
        <div id="inner">內部</div>
    </div>
    <script>
        document.querySelector("#root").addEventListener('click',function(){
            alert('root click')
        });
        document.querySelector("#inner").addEventListener('click',function(){
            alert('inner click1')
        });
        document.querySelector("#inner").addEventListener('click',function(){
            alert('inner click2')
        });
    </script>

阻止事件冒泡，這時僅僅顯示inner click1、inner click2，而沒有顯示root click了

        document.querySelector("#inner").addEventListener('click',function(evt){
            alert('inner click1')
            evt.stopPropagation();
        });

多次綁定事件，只執行一個，並且阻止冒泡，就只顯示一個inner click1了。

        document.querySelector("#inner").addEventListener('click',function(evt){
            alert('inner click1')
            evt.stopImmediatePropagation();
        });

 

對於react合成事件系統的理解：

　　在react內通過onClick綁定的事件，實際上並沒有把點擊事件綁定到對應的元素上，而是統一放到了document上處理。點擊一個元素，首先觸發這個元素的原生綁定事件（這里不討論捕獲），接着事件冒泡，到了document上，先觸發dispatch，即分發react的合成事件，這個觸發過程也是和冒泡類似，從里向外的。dispatch結束后，觸發document上剩余的原生事件，也就是說可以認為dispatch是document上的第一個原生綁定事件，這個事件內進行react合成事件的分發。

　　原生綁定的回調事件中獲取到的是原生事件。通過react在jsx內onClick綁定的回調事件中獲取到的是合成事件。

針對以上過程：

• 如何使所有綁定的react onClick無效？ 在子元素上原生綁定一個事件，然后阻止這個事件冒泡即可。
• 如何只執行子元素的onClick而不執行父元素的onClick？在子元素的onClick中阻止事件冒泡即可，注意這里獲取到的是合成事件，調用的是合成事件的方法，也就是說不管是原生事件還是合成事件， stopPropagation 的用法是一致的。
• 如何只執行onClick，而不觸發document的原生事件呢？在onClick中，調用： e.nativeEvent.stopImmediatePropagation 。這里的效果相當於在document的第一個原生事件（react自動綁定上的dispatch）中調用了 stopImmediatePropagation 阻止了 document 剩余的原生事件。