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)
})