使用香草JavaScript在瀏覽器中進行事件委託

我最喜歡的東西之一jQuery的是(是?)事件委託。特別是.on()方法。

我們選擇一個DOM元素,然後我們使用.on()附加在該元素的特定子元素上執行的事件處理程序。

為什麼這有用?因為如果您要向DOM動態添加元素,則單個事件偵聽器將通過.on()將對所有子項都起作用,即使是在註冊事件處理程序之後添加到DOM的子項也是如此。

假設您有一張桌子。在表格內部,我們有一組行,每行都有一個帶有單擊處理程序的按鈕。

您在DOM加載時註冊一個事件偵聽器:

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('button')

for (const button of buttons) { button.addEventListener(…) } })

但是,如果我們向表中添加新行,那麼我們還必須記住註冊一個新的事件偵聽器。

我們如何使用香草JavaScript複製相同的功能?

我們創建一個on帶包裝選擇器的函數,一個事件類型(a'click'例如字符串),一個子選擇器字符串,它將匹配包裝選擇器的後代。在此函數中,我們首先創建一個循環,然後向與包裝器選擇器匹配的每個元素添加一個事件偵聽器(因此它可以應用於多個包裝器選擇器)。

然後,如果事件的目標與我們的子選擇器(函數的第三個參數)匹配,我們將調用作為第4個參數傳遞的回調函數,並傳遞事件:

const on = (selector, eventType, childSelector, eventHandler) => {
  const elements = document.querySelectorAll(selector)
  for (element of elements) {
    element.addEventListener(eventType, eventOnElement => {
      if (eventOnElement.target.matches(childSelector)) {
        eventHandler(eventOnElement)
      }
    })
  }
}

這是我們如何調用此函數的方法:

on('ul', 'click', '.module.complete', event => {
  const item = event.target
  //...your event handler
})

現在,當我們單擊與之匹配的元素時.module.complete在下面ul選擇器,我們傳遞的函數中的代碼將運行,我們可以從中提取單擊的項目引用event.target

免費下載我的JavaScript初學者手冊


更多js教程: