iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

JavaScript 30實作心得筆記系列 第 25

Day25 Event Capture, Propagation, Bubbling and Once

Day25 Event Capture, Propagation, Bubbling and Once

第25天的主要講解元素事件觸發時的觸發順序。

這次的實作是由三個div相互包裹著。

在每一個div中建立click事件,在事件都是對應同樣的函示。

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

當按下three的div元素時,會發現console.log()的結果為three、two、one,當按two的div元素時,其結果為two、one,以此類推,若是在body中加入同樣的函示,當點下three的div元素,其結果為three、two、one。

這時就會發現若是觸發three的div元素,其顯示結果為three、two、one、body。

document.body.addEventListener('click', logText)

這時發現event的傳遞結果為向上傳遞的,此事件傳遞的方式叫冒泡bubbling

而另外一種事件傳遞的方式為capturing,而capturing的傳遞方式是從根節點傳遞至目標節點。

因此事件的傳遞設定如下,當click事件觸發時,結果為one、two、three。

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

如果為避免bubblingcapturing的事情發生,可以事件中加入e.stopPropagation(),來避免事件的傳遞。若使用e.stopPropagation()時,要知道事件傳遞的方式為bubbling還是capturing,這樣才可避免事件觸發到錯的目標節點。

接下來在事件中加入once,當事件被觸發時,該事件就只能觸發一次。

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

Html

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

Javascript

  1. EventTarget.addEventListener()
    EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件,或是其它支援事件的物件(如:XMLHttpRequest)。

    1. bubbling 冒泡:是指事件傳遞的順序是由目標節點向上傳遞,傳遞至根節點。
    2. capturing 捕獲: 是指事件傳遞的順序是由根節點向下傳遞,傳遞至目標節點。[1]


[2]

語法

target.addEventListener(type, listener[, options]);

options

  1. capture:當capturetrue時,事件順序為capture

  2. once:當oncetrue時,代表事件只觸發一下,之會在無法觸發該元素。

  3. passive:當passiveture時,省略preventDefault()的方法。
    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.

  4. Event.eventPhase
    表示事件物件目前於事件流(Event Flow)中傳遞的進度為哪一個階段。

  5. Event.preventDefault()
    如果事件可以被取消,就取消事件(即取消事件的預設行為)。但不會影響事件的傳遞,事件仍會繼續傳遞。

  6. EventTarget.removeEventListener()
    EventTarget.removeEventListener() 方法可以移除先前由 addEventListener() 所註冊的事件監聽器。

tags: bubbling, capturing

上一篇
Day24 Sticky Nav
下一篇
Day26 Stripe Follow Along Dropdown
系列文
JavaScript 30實作心得筆記30

尚未有邦友留言

立即登入留言