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>
从图中我们可以知道
1、一个完整的JS事件流是从window开始,最后回到window的一个过程
2、事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程
3、在冒泡过程中6比7早触发,也就解释了上面那题,为什么btn1,会比content先触发