iT邦幫忙

1

事件監聽 & 事件代理

  • 分享至 

  • xImage
  •  

事件監聽

  • 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 差異


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Ci_Yao_Yan
iT邦新手 4 級 ‧ 2019-05-25 08:30:10

長知識了,感恩

我要留言

立即登入留言