js delegate

作者：泪﹌无痕发布日期:2025-05-17 浏览:81

// 使用事件委托的示例代码

// HTML 结构
/*
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
*/

// JavaScript 代码
document.getElementById('myList').addEventListener('click', function(event) {
  // 检查点击的元素是否是 li
  if (event.target && event.target.nodeName === 'LI') {
    console.log('你点击了: ' + event.target.innerHTML);
  }
});

// 解释说明：
// 事件委托的核心思想是利用事件冒泡机制，将事件监听器绑定到父元素上，
// 而不是直接绑定到每个子元素。当子元素被点击时，事件会冒泡到父元素，
// 父元素的事件处理函数会被触发，并通过 event.target 来判断具体的子元素。
// 这样可以减少大量事件监听器的创建，提高性能，特别是在动态添加或删除子元素的情况下。

上一篇：js map set

下一篇：js rsa