事件捕获与事件冒泡
为啥提出这两个概念?
举个例子
<div id="parent">div1
<div id="child" class="child">div2</div>
</div>
<script>
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
})
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
})
</script>
如上代码两个div是包含关系,之后给两个div分别绑定click事件,那么当点击文字div2时,先触发哪个事件?
先触发内部的,再触发外部的,就是冒泡。
反之就是捕获。
捕获的代码就是在addEventListener加第三个参数,True。
如下代码
<div id="parent">div1
<div id="child" class="child">div2</div>
</div>
<script>
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
},true)
</script>
参考
彻底弄懂JS的事件冒泡和事件捕获 - 帅舅舅 - 博客园
js的事件流理解 - neal1991的专栏 - 博客频道 - CSDN.NET
浅谈js之事件流JavaScript第七城市