写例子说明如何给li绑定事件（ul下有1000+个li）？

在前端开发中，如果你有一个包含1000+个<li>元素的<ul>，并且你想要给每个<li>元素绑定事件，通常不推荐直接给每个<li>分别绑定事件，因为这样做会导致性能问题。相反，你可以使用事件委托（Event Delegation）的技术，将事件监听器添加到父元素上，然后利用事件冒泡来捕获和处理子元素上的事件。

下面是一个使用JavaScript和事件委托来给<li>元素绑定点击事件的例子：

HTML:

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 1000</li>
</ul>

JavaScript:

// 获取父元素 ul
const ul = document.getElementById('myList');

// 给父元素 ul 添加点击事件监听器
ul.addEventListener('click', function(event) {
  // 检查点击的目标元素是否是 li
  if (event.target.tagName.toLowerCase() === 'li') {
    // 是 li 元素，处理点击事件
    console.log('Clicked on:', event.target.textContent);
  }
});

在这个例子中，我们给<ul>元素添加了一个点击事件监听器。当用户点击<ul>内的任何元素时，事件监听器会被触发。在事件处理函数中，我们检查event.target（即触发事件的元素）是否是<li>元素。如果是，我们就执行相应的处理逻辑（在这个例子中是打印出被点击的<li>元素的文本内容）。

通过这种方式，我们只需要给父元素添加一个事件监听器，就可以处理所有子元素的点击事件，大大提高了性能和效率。