溫馨提示×

JavaScript中如何進行事件委托

小樊
81
2024-10-27 07:38:58
欄目: 編程語言

在 JavaScript 中，事件委托（Event delegation）是一種降低事件處理器數(shù)量的技術(shù)。通過將事件監(jiān)聽器添加到父元素上，而不是每個子元素上，可以利用事件冒泡機制捕獲子元素觸發(fā)的事件。當事件觸發(fā)時，可以通過檢查事件對象的 target 屬性來判斷實際觸發(fā)事件的元素，并執(zhí)行相應(yīng)的處理函數(shù)。

以下是一個簡單的示例，演示了如何在 JavaScript 中使用事件委托：

HTML 結(jié)構(gòu)：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript 代碼：

// 獲取父元素引用
const list = document.getElementById('list');

// 定義事件處理函數(shù)
function handleClick(event) {
  // 檢查觸發(fā)事件的元素是否是 li 子元素
  if (event.target.tagName === 'LI') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
}

// 為父元素添加事件監(jiān)聽器
list.addEventListener('click', handleClick);

在這個示例中，我們將事件監(jiān)聽器添加到了 id 為 list 的 ul 元素上。當點擊列表中的任意一個 li 子元素時，都會觸發(fā) handleClick 函數(shù)。在函數(shù)內(nèi)部，我們通過檢查 event.target 的標簽名來判斷實際觸發(fā)事件的元素，并輸出相應(yīng)的文本。這樣，我們就實現(xiàn)了事件委托，降低了事件處理器的數(shù)量。

0 踩