事件捕获与事件冒泡

为啥提出这两个概念？

举个例子

<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第七城市