事件監聽

• JQ JS 寫法比較
  JQ選擇器 可以一次選擇多個元素，一次性套用CSS、掛載事件
  原生 querySelectorAll 的結果為 NodeList，需要以迴圈方式套用CSS、掛載事件

• 原生寫法 會造成 大量DOM操作而效能不佳，採取事件代理方式可解決 (下見)

• JQ click 與 on 差別
  click 對於 後續新增的 DOM 無法偵測到
  on 則是能夠 動態事件綁定，後續新增的 DOM 仍有掛載事件的效果

• 動態事件綁定實現
  利用事件冒泡，類似於事件代理的方式，
  子元素被點時，母元素接受到事件而觸發事件
  .on('觸發方式','被點擊的選擇器')

  // JQ寫法
  
  // 儲存變數，避免用到又要再次尋找存取，亦可統一管理變數
  const myBtn = $('#myBtn')
  
  myBtn.click(FuncName)
  myBtn.on('click', FuncName)
  
  // 無動態事件綁定效果
  $('li span').click(function(){ /* do stuff*/ );
  $('li span').on('click',function(){ /* do stuff*/ );
  
  // on 動態事件綁定實現
  $('li').on('click','span',function(){ /* do stuff*/ );

  // 原生JS寫法
  const myBtn = document.querySelector('#myBtn')
  myBtn.addEventListener('click', funcName)

  const listItems = document.querySelectorAll('.listItem')
  listItems.forEach((el) => {
    el.addEventListener('cick', () => {
      // do stuff
    })
  })

事件代理 delegate

新人筆記: 若有錯誤歡迎提出勘誤，感謝各路大神

事件代理原理:

利用DOM事件傳遞機制 "冒泡"

1. 子元素 接收到 點擊事件
2. 事件冒泡 往上至母元素 接受到 點擊事件
3. 母元素 透過 match 去判斷該子元素應該要做甚麼行為

事件代理好處:

• 性能優化思想之一 就是減少 DOM 操作,事件代理可使 DOM 交互次數大幅減少

1. 減少監聽器的數量，節省不少記憶體資源
   Ex:列表下多個Item,利用事件代理只需一個,而非每個Item都掛載監聽器

2. 避免迴圈掛載監聽器，節省 DOM 操作次數

3. 棄用監聽器更為方便
   SPA頁面切換，僅更換內容不換頁，監聽器因內容置換而用不到，
   但仍會占用資源，因此棄用該監聽器可節省資源。
   使用事件代理，只需要棄用一個監聽器即可。

哪些適合事件代理,哪些則否

• 適合使用事件代理的事件
  click , mousedown , mouseup ,
  keydown , keyup , keypress

• 這些不適合
  mouseover , mouseout 需要計算位置較不容易把控
  mouseenter , mouseleave, focus , blur 則沒有冒泡特性

原生 JS 事件代理實現

• JQ delegate() 於 3.0版本被棄用

  // 原生JS 事件代理

  const myList = document.querySelector('.myList')
  myList.addEventListener('click', clickListItem)

  function clickListItem(e){
    const className = e.target.classList
    if (className.contains('')) { /* do stuff */}

    const tagName = e.target.tagName.toLowerCase()
    if (tagName === 'a') { /* do stuff */ }
  }

參考資料

JS中的事件委托或是事件代理详解
JQ click 與 on 差異