[JS作品]JS30系列25-Event Capture, Propagation, Bubbling and Once

主題目標

初始文檔index-start.html提供了3個尺寸不一的元素，本次挑戰是一次學習任務，主要了解學習DOM的事件機制，包括事件捕獲，事件冒泡，單次觸發等。先捕獲，再冒泡觀察，搭配 Console 觀看。

作品網址：

Demo作品連結
JavaScript 30 作品目錄

處理步驟

首先觀察one two three之層級關係

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

步驟1

建立三組 Div ，以及 click 觸發，觀察觸發順序

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

/**
 * 顯示目前觸發的 DOM 
 * 
 * @param {any} e 
 */
function logText(e){
  console.log(this.classList.value);
}

divs.forEach(div => div.addEventListener('click',logText));

其結果會是 three > two > one

步驟2

變更為”捕獲“動作

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

/**
 * 顯示目前觸發的 DOM 
 * 
 * @param {any} e 
 */
function logText(e){
  console.log(this.classList.value);
}

// 變更為捕獲
divs.forEach(div => div.addEventListener('click',logText,{capture:true}));

其結果會是 one > two > three

步驟3

其後增加使用 once 參數，此參數將使觸發進行一次

//使用 once 參數
const button = document.querySelector('button');
button.addEventListener('click', () => {
    console.log('Click!!!');
  }, {
    once: true
  });

只能點選觸發一次

特別技術、函式

<HTML>

<CSS>

<JavaScript>

EventTarget.addEventListener()

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

參考資料：

JS30紀錄 25-Event Capture, Propagation, Bubbling and Once：https://shunnien.github.io/2018/01/27/Javascript30days-25/

Js 30 day 中文指南：https://github.com/soyaine/JavaScript30

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言