JS事件冒泡与捕获

事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

如下：假设三层div都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢

<div id="s1" style="height: 400px;width: 400px;border: 1px solid red">红
    <div id="s2" style="height: 200px;width: 200px;border: 1px solid yellow">
        黄
        <div id="s3" style="height: 100px;width: 100px;border: 1px solid blue">蓝</div>
    </div>
</div>

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
因此在事件冒泡的概念下在div元素上发生click事件的顺序应该是div -> body -> html -> document

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
因此在事件捕获的概念下在div元素上发生click事件的顺序应该是document -> html -> body -> div -> div

w3c 采用折中的方式，制定了统一的标准——先捕获再冒泡。

addEventListener第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

测试事件冒泡-点击蓝色

    s1 = document.getElementById('s1')
    s2 = document.getElementById('s2')
    s3 = document.getElementById('s3')

    s1.addEventListener("click",function(e){
        console.log("红 冒泡事件");//从底层往上
    },false);//第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
    s2.addEventListener("click",function(e){
        console.log("黄 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("蓝 冒泡事件");
    },false);

测试事件捕获-点击蓝色

s1.addEventListener("click",function(e){
        console.log("红 捕获事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黄 捕获事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("蓝 捕获事件");
    },true);

事件捕获与事件冒泡同时存在

• 这里记被点击的DOM节点为target节点
• 对于非target节点则先执行捕获在执行冒泡
• 对于target节点则是先执行先注册的事件，无论冒泡还是捕获

    s1.addEventListener("click",function(e){
        console.log("红 冒泡事件");
    },false);
    s2.addEventListener("click",function(e){
        console.log("黄 冒泡事件");
    },false);
    s3.addEventListener("click",function(e){
        console.log("蓝 冒泡事件");
    },false);

    s1.addEventListener("click",function(e){
        console.log("红 捕获事件");
    },true);

    s2.addEventListener("click",function(e){
        console.log("黄 捕获事件");

    },true);
    s3.addEventListener("click",function(e){
        console.log("蓝 捕获事件");
    },true);