js事件冒泡和事件捕獲

事件冒泡 、事件捕獲 、 事件委託

一、事件冒泡 、事件捕獲 兩者聯繫與區別

聯繫：

(1)、都是 事件觸發時序問題 的術語。
(2)、綁定事件方法（addEventListener）的第三個參數是控制事件觸發順序的，默認爲false，即事件冒泡；若爲true,即事件捕獲。

區別：

(1)、事件冒泡： 從觸發事件的那個節點一直到document，是自下而上的去觸發事件。
(2)、事件捕獲： 從document到觸發事件的那個節點，即自上而下的去觸發事件。

二、事件冒泡

（1）、冒泡事件圖示：

<div id="father">
    <div id="son">事件測試</div>
 </div>
 <script src="jquery.min.js"></script>
 <script>
    window.onload = function () {
        //addEventListener綁定事件的第三個參數默認爲false
        document.getElementById("father").addEventListener("click", function () {
            console.log("這是父親=>" + this.id)
        });
        //addEventListener綁定事件的第三個參數默認爲false
        document.getElementById("son").addEventListener("click", function () {
            console.log("這是兒子=>" + this.id)
        })
    }
  </script>
  
 //結果：
     點擊father輸出結果： 這是父親=>father
     
     點擊son輸出結果：   這是兒子=>son    這是父親=>father   （事件冒泡：先son，後father）

（2）、上述代碼採用的事件冒泡機制：
1.當點擊son元素時，先觸發son的點擊事件，再觸發father的點擊事件，打印相應的內容；
2.當點擊father元素時，只觸發father的點擊事件，由於father元素冒泡上去沒有dom元素設置了click事件的函數

（3）、阻止事件冒泡

e.stopPropagation();

三、事件捕獲

事件捕獲圖示：

<div id="father">
    <div id="son"></div>
</div>
<script src="jquery.min.js"></script>
<script>
    window.onload = function () {
        //addEventListener綁定事件的第三個參數默認爲true
        document.getElementById("father").addEventListener("click", function () {
            console.log("這是父親=>" + this.id)
        },true);
        //addEventListener綁定事件的第三個參數默認爲true
        document.getElementById("son").addEventListener("click", function () {
            console.log("這是兒子=>" + this.id)
        },true)
    }
</script>   

   //結果：
    點擊father輸出結果：   這是父親=>father
    點擊son輸出結果：    這是父親=>father   這是兒子=>son  (事件捕獲：先father,後son)

上述代碼採用事件捕捉機制：
1.當點擊son元素時，先觸發father的點擊事件，再觸發son的點擊事件，打印相應的內容；
2.當點擊father元素時，只觸發father的點擊事件，由於father元素從上面捕捉下來一直到father元素沒有dom元素設置了click事件的函數；

四、事件委託

（1）、定義

事件委託：利用事件冒泡的原理。

（2)、使用狀況： 當有多個相似元素須要綁定事件時，一個一個去綁定既浪費時間，又不利於性能，這時候可使用事件委託，給他們的一個共同父級元素添加一個事件函數去處理他
們全部的事件狀況，代碼以下：

<ul id="newslist">
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
    <li>1234567890987654</li>
</ul>
<script src="jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#newslist").on("click", function (e) {
            $(e.target).css({ "background": "#f00" }).siblings().css({ "background": "#fff" });
        })
     })
</script>

注意：hover事件不能使用事件委託方式。

（3）、雖然上述例子中沒有給li添加點擊事件，爲何點擊相應的li會產生效果，咱們能夠理解爲：雖然咱們沒有給li設置點擊事件，可是默認的點擊事件是採用的時間冒泡，冒泡到父
級元素的點擊事件是用事件的target屬性判斷進行點擊的元素

• e.target 表示在事件冒泡中觸發事件的源元素。

• 而且e.target有不少屬性可操做：

  - e.target.nodeName  //獲取事件觸發元素標籤的name
  - e.target.id  //獲取事件觸發元素的id
  - e.target.className  //獲取事件觸發元素的className
  - e.target.innerHTML  //獲取事件觸發元素的內容