一，背景

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

 1<div class='s1'>
 2    <p class='s2'></p>
 3</div>

二，冒泡事件及事件捕获

什么是冒泡事件

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

冒泡示意图

什么是事件捕获

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

捕获示意图

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

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

 1element.addEventListener(event, function, useCapture)
 2
 3//第一个参数是需要绑定的事件
 4//第二个参数是触发事件后要执行的函数
 5//第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

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

新的事件流示意图

举个例子

html

 1<div id="s1">s1
 2    <div id="s2">s2</div>
 3</div>

javaScript

 1<script>
 2s1.addEventListener("click",function(e){
 3        console.log("s1 冒泡事件");         
 4},false);
 5s2.addEventListener("click",function(e){
 6        console.log("s2 冒泡事件");
 7},false);
 8        
 9s1.addEventListener("click",function(e){
10        console.log("s1 捕获事件");
11},true);
12        
13s2.addEventListener("click",function(e){
14        console.log("s2 捕获事件");
15},true);
16</script>

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

新的事件流示意图

捕获阶段

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

冒泡阶段

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

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

e的兼容

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

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中的事件流

阻止事件冒泡兼容:

 1function stopPropagation(e) {
 2    var e = e || window.event;
 3    if ( e && e.stopPropagation ){
 4        e.stopPropagation();
 5    }else{
 6        e.cancelBubble = true;
 7    }
 8}

阻止浏览器默认行为

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

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

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

 1function stopDefault(e) {
 2    var e = e || window.event;
 3    if (e && e.preventDefault){
 4        e.preventDefault();
 5    }else{
 6        e.returnValue = false;
 7    }
 8    return false;
 9}

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

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

合成事件

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

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

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

原生事件

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

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

或者

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

阻止冒泡事件分三种情况

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

 1import React,{ Component } from 'react';
 2import ReactDOM,{findDOMNode} from 'react-dom';
 3
 4class Counter extends Component{
 5    constructor(props){
 6        super(props);
 7        this.state = {
 8            count:0,
 9        }   
10    }
11
12    handleClick(e){
13        // 阻止合成事件间的冒泡
14        e.stopPropagation();
15        this.setState({count:++this.state.count});
16    }
17
18    testClick(){
19        console.log('test')
20    }
21
22    render(){
23        return(
24            <div ref="test" onClick={()=>this.testClick()}>
25                <p>{this.state.count}</p>
26                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
27            </div>
28        )
29    }
30}
31
32var div1 = document.getElementById('content');
33
34ReactDOM.render(<Counter/>,div1,()=>{});

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

 1import React,{ Component } from 'react';
 2import ReactDOM,{findDOMNode} from 'react-dom';
 3
 4class Counter extends Component{
 5    constructor(props){
 6        super(props);
 7        this.state = {
 8            count:0,
 9        }
10    }
11
12    handleClick(e){
13        // 阻止合成事件与最外层document上的事件间的冒泡
14        e.nativeEvent.stopImmediatePropagation();
15        this.setState({count:++this.state.count});
16    }
17
18    render(){
19        return(
20            <div ref="test">
21                <p>{this.state.count}</p>
22                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
23            </div>
24        )
25    }
26    
27    componentDidMount() {
28        document.addEventListener('click', () => {
29            console.log('document');
30        });
31    }
32}
33
34var div1 = document.getElementById('content');
35
36ReactDOM.render(<Counter/>,div1,()=>{});

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

 1import React,{ Component } from 'react';
 2import ReactDOM,{findDOMNode} from 'react-dom';
 3
 4class Counter extends Component{
 5    constructor(props){
 6        super(props);
 7        this.state = {
 8            count:0,
 9        }
10    }
11
12    handleClick(e){
13        this.setState({count:++this.state.count});
14    }
15    render(){
16        return(
17            <div ref="test">
18                <p>{this.state.count}</p>
19                <a ref="update" onClick={(e)=>this.handleClick(e)}>更新</a>
20            </div>
21        )
22    }
23
24    componentDidMount() {
25        document.body.addEventListener('click',e=>{
26            // 通过e.target判断阻止冒泡
27            if(e.target&&e.target.matches('a')){
28                return;
29            }
30            console.log('body');
31        })
32    }   
33}
34
35var div1 = document.getElementById('content');
36
37ReactDOM.render(<Counter/>,div1,()=>{});

一，背景

二，冒泡事件及事件捕获

什么是冒泡事件

什么是事件捕获

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

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

e的兼容

阻止事件冒泡

阻止事件冒泡兼容:

阻止浏览器默认行为

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

合成事件

原生事件

阻止冒泡事件分三种情况