SOURCE

// 假设我们有以下HTML结构
/*
<ul id="item-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <!-- 更多的列表项 -->
</ul>
*/

// 获取父元素（列表）
const itemList = document.getElementById('item-list');

// 事件代理函数
function handleItemClick(event) {
  // 检查事件目标是否为列表项（即<li>元素）
  if (event.target && event.target.nodeName === 'LI') {
    // 执行相应的操作，例如输出被点击的列表项的文本内容
    console.log('Clicked item:', event.target.textContent);
  }
}

// 将事件监听器添加到父元素上
itemList.addEventListener('click', handleItemClick);