Event Capture, Propagation, Bubbling and Once 筆記

demo

目的

• 事件監聽
• 事件捕獲
• 事件冒泡
• 單次執行事件

程式碼說明

  let divs = document.querySelectorAll('div');
  let button = document.querySelector('button');
     // e.stopPropagation(); 事件停止冒泡
   //console log 這裡觸發事件順序是 ？？ 3>2>1
   //
   //
  // document.body.addEventLister('click',logText);
  // body的值

  divs.forEach(div => div.addEventListener('click', logText {
    once: false, 
    capture: true
    capture true= //事件捕捉模式
    
  })
  )

  // button.addEventListener('click',logText,{
  //   once: true//事件次數只執行一次
  });

  // function logText(e) {
  //   console.log(this.classList.value);
  //   e.stopPropagation();
  // }

addEventListener 語法

document.addEventListener(event, function, useCapture)
event 事件
function 事件觸發後產生的參數
useCapture boolean值，就是true or false，如果送出true的話就是瀏覽器會使用Capture方式，false的話是Bubbling

事件氣泡 event bubbling
事件由外循序啟動 最外層的元件

事件捕捉 event captureing
事件是最外層開始 往內啟動到最具體的元件
此事件流層 不被ie8 或是更早的支援

javascript 說明

[classList] (http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/)
class 身上增加div

stopPropagation()
停止事件氣泡或事件捕捉

addEventListener（）
方法最後一個參數可允許指定事件觸發方向

true = 事件捕捉
false = 事件氣泡模式