js事件冒泡于事件捕获

事件冒泡

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

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

 1 //例子
 2 <div id="parent">
 3 　　<div id="child" class="child"></div>
 4 </div>
 5 
 6 <script>
 7     var d_parent = document.getElementById("parent");
 8     var d_child= document.getElementById("child");
 9     
10     d_parent.addEventListener("click",function(e){
11         alert("parent事件被触发，"+this.id);
12     })
13     d_child.addEventListener("click",function(e){
14         alert("child事件被触发，"+this.id)
15     })
16 <script>
17 
18 //结果：
19 //child事件被触发，child
20 //parent事件被触发，parent
21 
22 //结论：先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。事件触发顺序变更为自外向内，这就是事件捕获。

事件捕获
当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

event.stopPropagation(); -- 阻止元素冒泡事件　

也可以用开关实现，