<ul></ul>

<script>
  const ul = document.querySelector('ul');
  
  /** 创建多个 li 元素并添加到 ul */
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i += 1) {
    const li = document.createElement('li');
    li.textContent = '列表项 ' + (i + 1);
    /** 添加自定义属性, 用于区分 li */
    li.dataset.index = i + 1;
    fragment.appendChild(li);
  }
  ul.appendChild(fragment);
  
  /**
   * 给 ul 添加点击事件监听
   * 任意一个 li 被点击都会冒泡到 ul
   * 通过 event.target 判断点击的是哪个 li
   * dataset 可以获取到所有自定义属性 data-*
   */
  ul.addEventListener(
    'click',
    event => 
      window.alert('点击的列表项是 ' + event.target.dataset.index),
  )
</script>