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

在前端开发中，为大量 li 元素（例如 1000+ 个）绑定事件时，直接为每个 li 单独绑定事件监听器会造成性能问题。更高效的做法是利用事件委托（Event Delegation）。

以下是几个例子，演示如何使用事件委托给 ul 下的众多 li 绑定事件：

1. 纯 JavaScript 事件委托:

const ul = document.getElementById('my-list');

ul.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    // 处理点击事件，例如：
    console.log('Clicked on:', event.target.textContent);
    // 获取 li 元素的 data 属性
    const dataValue = event.target.dataset.value;
    if (dataValue) {
      console.log('Data value:', dataValue);
    }
  }
});

// 动态添加 li 元素示例
const newLi = document.createElement('li');
newLi.textContent = 'New Item';
newLi.dataset.value = 'new'; // 添加 data 属性
ul.appendChild(newLi);

HTML 结构示例:

<ul id="my-list">
  <li data-value="1">Item 1</li>
  <li data-value="2">Item 2</li>
  <!-- ... 1000+ li elements ... -->
</ul>

2. 使用 jQuery 的事件委托:

$(document).ready(function() {
  $('#my-list').on('click', 'li', function() {
    console.log('Clicked on:', $(this).text());
    // 获取 li 元素的 data 属性
    const dataValue = $(this).data('value');
    if (dataValue) {
      console.log('Data value:', dataValue);
    }
  });

  // 动态添加 li 元素示例
  const newLi = $('<li data-value="new">New Item</li>');
  $('#my-list').append(newLi);
});

解释:

事件委托原理: 事件委托利用了事件冒泡机制。我们不直接给每个 li 绑定事件，而是将事件监听器绑定到它们的父元素 ul 上。当 li 被点击时，事件会冒泡到 ul，触发 ul 上的监听器。在监听器中，我们通过 event.target (原生JS) 或 $(this) (jQuery) 来确定具体是哪个 li 被点击。
性能优势: 这种方式只需要一个事件监听器，无论有多少个 li 子元素，都只绑定一次事件，避免了大量绑定带来的性能开销。
动态添加元素: 即使动态添加 li 元素，事件委托依然有效，无需再次绑定事件。
data 属性: 示例中演示了如何获取 li 元素上的 data 属性，方便存储和访问自定义数据。