事件冒泡與事件捕獲

需要瞭解的知識點：

　　1. 向指定元素添加事件的方法：addEventListener()方法

　　2. Dom2級事件中事件流的三個階段：事件捕獲階段、目標元素、事件冒泡階段

　　3. javascript中 “this與e.target”的區別

 addEventListener()方法

　　語法：addEventListener(event ， function ，useCapture)；

　　說明：event：事件名稱，必填。

　　　　　function：事件觸發時要執行的函數，必填。

　　　　　useCapture:blooen值，可選，事件是否在捕獲或冒泡階段執行。

　　　　　　　　　　true：事件在捕獲階段執行

　　　　　　　　　　false：事件在冒泡階段執行

事件捕獲

　　1.什麼是事件捕獲：

　　　　從根節點將事件傳播到目標元素的過程

　　2.demo1：

　　html代碼

<div class="box">
     <p class="box1"></p>
</div>

　　css代碼

.box{
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}
.box1{
    width: 150px;
    height: 150px;
    background-color: #FF0000;
    margin: 75px auto;
}

　　js代碼

　//獲取被操作的元素

　var div_v = document.querySelector('.box');
　var p_v = document.querySelector('.box1');

div_v.addEventListener('click' , function  () {
    console.log("父級元素");
} ,true);
p_v.addEventListener('click' , function  () {
    console.log("子集元素");
} ,true);
document.getElementsByTagName("body")[0].addEventListener('click' ,function  () {
    console.log("根元素");
} ,true);

事件冒泡

　　1.什麼是事件冒泡

　　　　從目標元素向上級元素冒泡一直到根節點

　　2.demo2

　　　　Html/css部分與demo1相同

　　　　js代碼

　//獲取被操作的元素

　var div_v = document.querySelector('.box');
　var p_v = document.querySelector('.box1');

div_v.addEventListener('click' , function  () {
    console.log("父級元素");
});
p_v.addEventListener('click' , function  () {
    console.log("子集元素");
});
document.getElementsByTagName("body")[0].addEventListener('click' ,function  () {
    console.log("根元素");
});

“this與e.target”的區別(理解即可)

　　在js中由於冒泡事件的影響，所以this的值是不確定的，而 e.target 則只會接受該事件的目標Dom元素，所以在使用的之前要根據需求而選擇。

好了，結合上述的例子，寫一個大同小異的例子，實現代碼如下：

html代碼

<ul>
    <li>子元素1</li>
    <li>子元素2</li>
    <li>子元素3</li>
</ul>

css代碼

ul{
    width: 100px;
    border: 1px solid #000;
}
li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    list-style: none;
    cursor: pointer;
}

js代碼

var ul_v = document.querySelector('ul');
ul_v.addEventListener('mouseover' ,function  (e) {
    //e.target.parentNode.children 獲取父元素下的所有子元素
    //使用e.target 不適用this 的原因:受到冒泡的影響,this會改變,而e.target只接受事件的目標DOM元素
    for (var i = 0;i<e.target.parentNode.children.length;i++) {
        e.target.parentNode.children[i].style.backgroundColor = "#fff";
    }
    e.target.style.backgroundColor = "red";
});

以上是本人對事件冒泡與事件捕獲的潛在理解，裡邊有不足的地方還望大家提出，大家一起交流討論！