react事件代理

Posted 2020-10-17 HelloHello233

参考：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 剩余的原生事件。