【笔记】JS的事件冒泡 和 事件捕获

事件冒泡

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。

事件冒泡是自下而上(从最深节点开始，向上传播事件)的触发事件

//例子
<div id="parent">
　　<div id="child" class="child"></div>
</div>

<script>
    var d_parent = document.getElementById("parent");
    var d_child= document.getElementById("child");
    
    d_parent.addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    })
    d_child.addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
    })
<script>

//结果：
//child事件被触发，child
//parent事件被触发，parent

//结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。

阻止冒泡

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。默认false,即事件冒泡。
true,事件捕获；false,事件冒泡。

<script>
    var d_parent = document.getElementById("parent");
    var d_child= document.getElementById("child");
    d_parent.addEventListener("click",function(e){
        alert("parent事件被触发，"+this.id);
    },true)
    d_child.addEventListener("click",function(e){
        alert("child事件被触发，"+this.id)
    },true)
<script>


//结果：
//parent事件被触发，parent
//child事件被触发，child

//结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。