react事件冒泡--合成事件、原生事件

一、什么是合成事件、什么是原生事件

1、合成事件

在jsx中直接绑定的事件，如

<a onClick={(e)=>this.handleClick(e)}>更新</a>

这里的handleClick事件就是合成事件

2、原生事件

通过js原生代码绑定的事件，如

document.body.addEventListener('click',e => {
    if(e.target&&e.target.matches('a')){
        return;
    }
    console.log('body');
});

二、如何阻止事件冒泡

目前得出的结论

1. e.stopPropagation() 可以阻止合成事件。

2. e.nativeEvent.stopImmediatePropagation(); 可以阻止document上的原生事件

3. 要想阻止所有的冒泡事件，只能通过ref获得dom节点监听，用 原生事件对象e的e.stopPropagation()去阻止冒泡(除非是本身dom节点的其他原生监听事件 比如：dom.addeventlister('click', ...))

4. e.target.matches方法也可以用来解决事件冒泡。

5. 如果是原生点击监听事件里面，设置e.stopPropagation()，那就是只有它自己上的点击事件才会触发。(连自己的合成事件都不会触发)。原理就是，原生事件先执行完成之后，才去管 合成事件，react所有合成事件, SyntheticEvent里面执行回调函数document.addEventListener('click'， SyntheticEvent);

测试地址：codepen.io/nancysss/pe…

1. e.stopPropagation() 可以阻止合成事件。 流程：点击按钮，首先触发root上的原生事件，然后是body上的原生事件。接下来是document上的合成事件、以及document上的原生事件。

因为在合成事件里面设置了e.stopPropagation(), 会阻止合成事件的执行。所以打印结果如下，可以发现 out dom的合成事件没有执行，没有输出out dom click。成功。

2. e.nativeEvent.stopImmediatePropagation(); 可以阻止document上的原生事件

3. 通过ref获得dom节点监听，用 原生事件对象e的e.stopPropagation()去阻止冒泡

4. e.target.matches方法也可以用来解决事件冒泡。

5. 原生点击监听事件里面，设置e.stopPropagation()，那就是只有它自己上的点击事件才会触发。(连自己的合成事件都不会触发)。原理就是，原生事件先执行完成之后，才去管 合成事件，react所有合成事件, SyntheticEvent里面执行回调函数document.addEventListener('click'， SyntheticEvent);

结尾：可以自己动手试试，如果去掉了在原生点击监听事件里面的e.stopPropagation()，点击button，控制台输出结果是多少

答案：