js事件冒泡和事件捕獲

ermaoL 發(fā)布于2019-08-22 18:39 / 1787人閱讀

摘要：事件冒泡事件捕獲事件委托事件冒泡事件捕獲二者聯(lián)系與區(qū)別聯(lián)系都是事件觸發(fā)時序問題的術(shù)語。綁定事件方法的第三個參數(shù)是控制事件觸發(fā)順序的，默認為，即事件冒泡若為即事件捕獲。

事件冒泡、事件捕獲、事件委托 1、事件冒泡、事件捕獲二者聯(lián)系與區(qū)別

聯(lián)系：

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

區(qū)別：

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

2、事件冒泡

（1）、冒泡事件圖示：

 
    事件測試
 
 
 
  
 //結(jié)果：
     點擊father輸出結(jié)果： 這是父親=>father
     
     點擊son輸出結(jié)果：   這是兒子=>son    這是父親=>father   （事件冒泡：先son，后father）

（2）、上述代碼采用的事件冒泡機制：
   1.當點擊son元素時，先觸發(fā)son的點擊事件，再觸發(fā)father的點擊事件，打印相應(yīng)的內(nèi)容； 
   2.當點擊father元素時，只觸發(fā)father的點擊事件，因為father元素冒泡上去沒有dom元素設(shè)置了click事件的函數(shù)

（3）、阻止事件冒泡

e.stopPropagation();

3、事件捕獲

事件捕獲圖示：


    


   

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

上述代碼采用事件捕捉機制：
 1.當點擊son元素時，先觸發(fā)father的點擊事件，再觸發(fā)son的點擊事件，打印相應(yīng)的內(nèi)容； 
 2.當點擊father元素時，只觸發(fā)father的點擊事件，因為father元素從上面捕捉下來一直到father元素沒有dom元素設(shè)置了click事件的函數(shù)；

4、事件委托

（1）、定義

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

（2)、使用情況：當有多個類似元素需要綁定事件時，一個一個去綁定既浪費時間，又不利于性能，這時候可以使用事件委托，給他們的一個共同父級元素添加一個事件函數(shù)去處理他
們所有的事件情況，代碼如下：


    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654

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

（3）、雖然上述例子中沒有給li添加點擊事件，為什么點擊相應(yīng)的li會產(chǎn)生效果，我們可以理解為：雖然我們沒有給li設(shè)置點擊事件，但是默認的點擊事件是采用的時間冒泡，冒泡到父
級元素的點擊事件是用事件的target屬性判斷進行點擊的元素

e.target 表示在事件冒泡中觸發(fā)事件的源元素。

并且e.target有很多屬性可操作：

- e.target.nodeName  //獲取事件觸發(fā)元素標簽的name
- e.target.id  //獲取事件觸發(fā)元素的id
- e.target.className  //獲取事件觸發(fā)元素的className
- e.target.innerHTML  //獲取事件觸發(fā)元素的內(nèi)容