[程式碼&DEMO] [HackMD完整筆記]

目標

解析addEventListener中:

• Event Capture 事件捕捉
• Event Bubbling 事件冒泡
• Propagation
• Once 單次執行

步驟流程

HTML部分：
共三層

<div class="one"> 
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>

JS部分：

// 取得頁面的所有div
const divs = document.querySelectorAll('div');

function logText(e) {
 // 印出目前div的class name
  console.log(this.classList.value);
}

// 每個div都加上click事件監聽
divs.forEach(div => div.addEventListener('click', logText));

監聽事件語法：
EventTarget.addEventListener('type', callback, option)

將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物件。

[參數]

• type事件名稱
  表示所監聽的 event type 名稱之字串。
• callback
  該事件的回呼涵式(監聽器)，當監聽的事件發生時負責接收事件物件（Event 的實作物件）的物件。
  這個物件必須是事件監聽器（實作了 EventListener 介面）or 一個簡單的 JavaScript 函式。
• options （可選）
• 註冊的選項對象
• capture（預設為false）
• once（預設為false）
• passive
  A Boolean indicating that the listener will never call preventDefault(). If it does, the user agent should ignore it and generate a console warning.
• mozSystemGroup
  Available only in code running in XBL or in Firefox's chrome, it is a Boolean defining if the listener is added to the system group.

**1 capture **

  const divs = document.querySelectorAll('div');

  function logText(e){
    console.log(this.classList.value); //three, two, one
  }

  divs.forEach(div => div.addEventListener('click', logText, {
  capture : false,
  once : false,

註冊一個監聽器時，會由外向內去「捕捉」(Capture)這個監聽器的位置。
當位置被觸發時，會由內向外去「冒泡」(bubbling)。

capture：false(預設，不處理「捕捉」的過程，只處理「冒泡的過程」。)
事件：點擊最內圈的div
結果：three=>two=>one。

  const divs = document.querySelectorAll('div');

  function logText(e){
    console.log(this.classList.value); //one, two, three
  }

  divs.forEach(div => div.addEventListener('click', logText, {
  capture : true,
  once : false,
}));

capture：true（不會執行冒泡）
結果：one=>two=>three。

**2 stopPropagation() **

  const divs = document.querySelectorAll('div');

  function logText(e){
    console.log(this.classList.value); 
    //capture:true->one, capture:false->three
    e.stopPropagation();
  }

  divs.forEach(div => div.addEventListener('click', logText, {
  capture : true,
  once : false,
}));

不管在bubbling或capture中加入了e.stopPropagation()時，都會中斷過程。
capture:ture => 結果：one
capture:false => 結果：three

**3 once **

button.addEventListener('click', () => {
    console.log('Click!!!');
  }, {
    once: true
  });

按鈕click後，直接unbind這個元素與事件,
之後這個按鈕就將不會再被觸發click事件。