写一个使用事件委托处理大量 DOM 元素的案例

以下是一个使用事件委托处理大量 DOM 元素的案例：

HTML 代码：

<ul id="itemList">
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
  <li>项目 4</li>
  <li>项目 5</li>
  <li>项目 6</li>
  <li>项目 7</li>
  <li>项目 8</li>
  <li>项目 9</li>
  <li>项目 10</li>
</ul>

JavaScript 代码：

document.getElementById('itemList').addEventListener('click', function(event) {
   
  if (event.target.tagName === 'LI') {
   
    console.log('点击了项目：' + event.target.textContent);
  }
});

在这个案例中，我们将点击事件委托给了 #itemList 元素。当点击列表中的任何一个 <li> 元素时，都会触发事件处理函数，并在控制台输出被点击的项目的内容。这样就避免了为每个 <li> 元素单独绑定事件处理函数，提高了代码的效率和可维护性。