事件冒泡，事件捕获与事件代理到底是什么？

一、介绍

1、事件捕获

由最外层元素即根元素接收事件，一直向内传播，若在捕获阶段注册的有与触发事件相同的事件，则运行它，直到传给目标元素。

2、事件冒泡

由目标元素接收事件，一直向外传播，若在冒泡阶段注册的有与触发事件相同的事件，则运行它，直到传给最外层元素。

3、事件代理

把元素事件委托给其父元素或者更外层的元素，以此减少事件绑定数量，降低内存消耗。

二、 阻止方法

1. js在非ie浏览器中可用e.stopPropagation()方法和stopImmediatePropagation()方法,在ie下用e.cancelBubble()方法；stopImmediatePropagation()可阻止同一节点的同一事件的其它事件处理程序
2. jquery可利用回调函数返回false的方式；该方法只有jquery可利用

$('#child').click(function(e){
            console.log('我是子元素');
            return false;
        })

等同于

$('#child').click(function(e){
            console.log('我是子元素');
            e.stopPropagation(); // 阻止冒泡/捕获
            e.preventDefault(); // 阻止默认行为 
        })

3. vue可在事件后添加.stop或.self修饰符,.stop修饰符用来阻止冒泡/捕获，.self修饰符表明事件只作用于该元素。

三、事件流

当一个事件发生在具有父元素的元素（即为目标函数）身上时，事件流会进行①捕获，②目标，③冒泡等三个阶段，依次进行。将以下面例子详细说明：

    <div id="grandparent">我是祖先元素
        <div id="parent">我是父元素
            <div id="child">我是子元素</div>
        </div>
    </div>

给祖先元素，父元素，子元素都绑定click点击事件，且设置在捕获阶段时的回调函数，代码如下：
ps：addEventListener(type, listener, useCapture)方法第三个参数默认值为false,表示向外冒泡的时候会触发，true则表示向内捕获的时候会触发

let grandparent = document.querySelector('#grandparent');
        let parent = document.querySelector('#parent');
        let child = document.querySelector('#child');
        child.addEventListener('click',function(){
            console.log('我是子元素');
        })
        parent.addEventListener('click',function(){
            console.log('我是父元素');
        })
        grandparent.addEventListener('click',function(){
            console.log('我是祖先元素');
        })
        child.addEventListener('click',function(){
            console.log('我是子元素（捕获）');
        },true)
        parent.addEventListener('click',function(){
            console.log('我是父元素（捕获）');
        },true)
        grandparent.addEventListener('click',function(){
            console.log('我是祖先元素（捕获）');
        },true)

点击子元素时，输出如下：