react 冒泡与捕获

2021-10-21

1500 字约 5 分钟

...

一，背景

世纪初的网景与微软公司的浏览器大战想必身为程序员都略有耳闻，冒泡与捕获——两种截然相反的处理事件机制，就是这场战争的主角之一。

<div class='s1'>
    <p class='s2'></p>
</div>

二，冒泡事件及事件捕获

什么是冒泡事件

顾名思义，像是水中冒泡一样，从下往上。事件由第一个被触发的元素接收，然后逐级向上传播。s1、s2同时有点击事件，当点击子元素s2时，会先触发s2再触发s1。

冒泡示意图

什么是事件捕获

与冒泡事件相反，是冲上往下。事件由body逐级向下传播，直到到达目标元素。s1、s2同时有点击事件，当点击子元素s2时，会先触发s1再触发s2

捕获示意图

三，DOM2之后的世界太平——addEventListener的第三个参数

网景和微软曾经的战争还是比较火热的，当时，网景主张捕获方式，微软主张冒泡方式。后来 w3c 采用折中的方式，平息了战火，制定了统一的标准——先捕获再冒泡。 addEventListener的第三个参数就是为冒泡和捕获准备的。 addEventListener有三个参数：

element.addEventListener(event, function, useCapture)

//第一个参数是需要绑定的事件
//第二个参数是触发事件后要执行的函数
//第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

w3c说，大家有话好好说，争来争去的干嘛呀，来，用这个，你爱用啥用啥，反正我的事件流固定就是先捕获后冒泡，至于你愿意谁先谁后，你自己注册（就是js里声明的意思）。

新的事件流示意图

举个例子

html

<div id="s1">s1
    <div id="s2">s2</div>
</div>

javaScript

<script>
s1.addEventListener("click",function(e){
        console.log("s1 冒泡事件");         
},false);
s2.addEventListener("click",function(e){
        console.log("s2 冒泡事件");
},false);
        
s1.addEventListener("click",function(e){
        console.log("s1 捕获事件");
},true);
        
s2.addEventListener("click",function(e){
        console.log("s2 捕获事件");
},true);
</script>

好，大家跟我拿着这个图一步一步照着看：

新的事件流示意图

捕获阶段

点击s2（目标节点），click事件从document->html->body->s1->s2
这里在s1上发现了捕获注册事件，则输出"s1 捕获事件"
到达s2，已经到达目的节点，
s2上注册（在js中声明，下面不一一解释）了冒泡和捕获事件，先注册的冒泡后注册的捕获，则先执行冒泡，输出"s2 冒泡事件"
再在s2上执行后注册的事件，即捕获事件，输出"s2 捕获事件"

冒泡阶段

下面进入冒泡阶段，按照s2->s1->body->html->document
在s1上发现了冒泡事件，则输出"s1 冒泡事件"

四，如何停止冒泡事件和阻止浏览器默认行为

e的兼容

function fn(e){
    var event = e || window.event;
}

FireFox里的Event跟IE里的不同，IE里的是全局变量，随时可用。FireFox里的要用参数引导才能用，是运行时的临时变量在IE/Opera中是window.event，在FireFox中是event。而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用

阻止事件冒泡

W3C的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。stopPropagation是事件对象Event的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止默认行为。stopPropagation就是阻止目标元素的事件冒泡到父级元素了解更多请点这:理解DOM中的事件流

阻止事件冒泡兼容:

function stopPropagation(e) {
    var e = e || window.event;
    if ( e && e.stopPropagation ){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

阻止浏览器默认行为

W3C的方法是e.preventDefault()，IE则是使用e.returnValue = false。preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为。如果元素没有默认行为，调用无效。什么元素有默认行为呢？如链接<a href="xxx">点我</a>，提交按钮<input type=”submit”>等

return false: JS的return false只会阻止默认行为，而jQuery则既阻止默认行为又防止对象冒泡

阻止浏览器默认行为兼容：

function stopDefault(e) {
    var e = e || window.event;
    if (e && e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    return false;
}

五，react中采用的事件处理机制及阻止方式

首先我们要了解react中合成事件和原生事件是什么。

合成事件

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

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

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

原生事件

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

document.body.addEventListener('click',e=>{
    // 通过e.target判断阻止冒泡
    if(e.target&&e.target.matches('a')){
        return;
    }
    console.log('body');
})

或者

this.refs.update.addEventListener('click',e=>{
    console.log('update');
});

阻止冒泡事件分三种情况

==A、阻止合成事件间的冒泡，用e.stopPropagation();==

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
    constructor(props){
        super(props);
        this.state = {
            count:0,
        }   
    }

    handleClick(e){
        // 阻止合成事件间的冒泡
        e.stopPropagation();
        this.setState({count:++this.state.count});
    }

    testClick(){
        console.log('test')
    }

    render(){
        return(
            <div ref="test" onClick={()=>this.testClick()}>
                <p>{this.state.count}</p>
                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
            </div>
        )
    }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

==B、阻止合成事件与最外层document上的事件间的冒泡，用e.nativeEvent.stopImmediatePropagation();==

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
    constructor(props){
        super(props);
        this.state = {
            count:0,
        }
    }

    handleClick(e){
        // 阻止合成事件与最外层document上的事件间的冒泡
        e.nativeEvent.stopImmediatePropagation();
        this.setState({count:++this.state.count});
    }

    render(){
        return(
            <div ref="test">
                <p>{this.state.count}</p>
                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
            </div>
        )
    }
    
    componentDidMount() {
        document.addEventListener('click', () => {
            console.log('document');
        });
    }
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});

==C、阻止合成事件与除最外层document上的原生事件上的冒泡，通过判断e.target来避免==

import React,{ Component } from 'react';
import ReactDOM,{findDOMNode} from 'react-dom';

class Counter extends Component{
    constructor(props){
        super(props);
        this.state = {
            count:0,
        }
    }

    handleClick(e){
        this.setState({count:++this.state.count});
    }
    render(){
        return(
            <div ref="test">
                <p>{this.state.count}</p>
                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
            </div>
        )
    }

    componentDidMount() {
        document.body.addEventListener('click',e=>{
            // 通过e.target判断阻止冒泡
            if(e.target&&e.target.matches('a')){
                return;
            }
            console.log('body');
        })
    }   
}

var div1 = document.getElementById('content');

ReactDOM.render(<Counter/>,div1,()=>{});