使用文档碎片减少DOM操作&事件代理

    <ul id="list"></ul>

      const ul = document.getElementById('list')
      const fragment = document.createDocumentFragment()
      for (let i = 0; i < 5; i++) {
        const li = document.createElement('li')
        li.innerHTML = `项目${i}`
        li.addEventListener('click', (e) => {
          e.stopPropagation()
          console.log(i)
        })
        // ul.appendChild(li) // 每次插入dom都会引起回流重绘
        fragment.appendChild(li) // 此时存于内存中，并没有操作dom
      }
      ul.appendChild(fragment) // 一次性插入dom，相比于每次创建li都插入dom节省性能

      // 事件代理
      ul.addEventListener('click', (e) => {
        if (e.target.nodeName !== 'LI') return
        const arr = Array.from(ul.children)
        const index = arr.indexOf(e.target)
        const content = arr[index].innerHTML // e.target.innerHTML
        console.log(index)
        console.log(content)
      })