手写事件委托

注意

点击li，alert出当前li的内容

<ul id="test">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

1
2
3
4
5
6

答：

const container = document.getElementById('test')
container.addEventListener('click', (e) => {
  console.log(e.target.innerText)
})

1
2
3
4

注意

点击li，alert出当前li的索引

答：

const container = document.getElementById('test')
const list = [...container.children] // 或：document.getElementsByTagName('li')
container.addEventListener('click', e => {
  console.log(list.indexOf(e.target))
})

1
2
3
4
5

知识点：<code>addEventListener</code>, <code>e.target</code>是点击的元素，<code>getElementById</code>, <code>getElementsByTagName</code>. 代码一看就会，不会要手写的话，还是得提前练练手，记下单词😢

编辑

上次更新: 2025/07/17, 07:17:44

← 手写分时函数手写图片懒加载→