react事件代理

Posted HelloHello233

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 剩余的原生事件。

以上是关于react事件代理的主要内容,如果未能解决你的问题,请参考以下文章

React事件机制-事件分发

React 事件委托

iOS 上的 DeviceEventEmitter

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

React学习笔记

React的条件渲染和列表渲染