js事件流

一、什么是JavaScript事件流? 

原文博客:https://www.cnblogs.com/st-leslie/p/5907556.html(写得非常好)

//举例
<body>
    <div style="width:200px;height:200px;background:lightblue" id="content">
        <div style="width:100px;height:100px;background: lightyellow;" id="btn1">
        </div>
    </div>
</body>

<script type="text/javascript">
    var content=document.getElementById("content");
    var btn1=document.getElementById('btn1');
    btn1.onclick=function(){
        alert("btn1");
    };
    content.onclick=function(){
        alert("content");
    }
</script>

js事件流

从图中我们可以知道

1、一个完整的JS事件流是从window开始,最后回到window的一个过程

2、事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程

3、在冒泡过程中6比7早触发,也就解释了上面那题,为什么btn1,会比content先触发