課程目的:

這次的內容是了解冒泡事件以及capture、bubble和once這三個方法
作品實做

本次功能實作重點：

• 了解HTML結構
• 監聽事件以及了解capture、bubble和once運作原理
• 停止冒泡

了解HTML結構

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

    <button>請點擊我！</button>

監聽事件以及了解capture、bubble和once運作原理

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

 divs.forEach((div) => {
        div.addEventListener("click", clickHandler, {
          capture: true, //監聽冒泡，false為由內而外監聽，監聽capture，True為由外而內
          // once: true, //只執行一次
        });
      });
      function clickHandler(e) {
        // e.stopPropagation(); //停止冒泡
   
        console.log(this.classList.value);
      }
      button.addEventListener(
        "click",
        () => {
          console.log("你點擊到了！");
        },
        { once: true }
      );

e.addEventListener(event, func , {capture: false, once: true}) 總共有三個參數：

event 為我們所要監聽的事件

func 當監聽到事件時觸發的動作(函式)

{capture: false, once: true}:

capture(捕獲) 當我們設定capture 為false時，事件監聽會會在冒泡階段(由內而外)觸發，如果是true則轉為捕獲階段(由外往內)

設定capture :false，當點擊橘色的div時

會監聽到的class順序為three ⇒ two⇒ one

設定capture :true，當點擊橘色的div時

會監聽到的class順序為one ⇒ two⇒ three

once: true 當設定once為true時，監聽只會觸發一次

停止冒泡

*e.stopPropagation() 會中止冒泡事件，只觸發當前監聽到的元素*

導讀文件以及學習資源

JS30