iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

JS煉金術:Javascript30+聲光玩轉的Drum Pads系列 第 26

[JS30]DAY25 : Event Capture, Propagation, Bubbling and Once


[程式碼&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事件。


上一篇
[JS30] DAY24 : Sticky Nav
下一篇
[JS30]DAY26: Strip Follow Along Nav
系列文
JS煉金術:Javascript30+聲光玩轉的Drum Pads30

尚未有邦友留言

立即登入留言