给ul添加click事件监听，当点击子Li时如何获取是点了每几个子元素？

你打印一下绑定事件的 event 你就知道了，可以从 Event.target 上面获取到对最初分发事件的对象的引用。但是我找了一圈没有找到元素下标相关的信息，所以如果可以的话，可以直接在 li 元素上面绑定一下自定义的 index 属性，然后去获取：

<ul id="demo">
  <li index="1">one</li>
  <li index="2">two</li>
</ul>
<script>
const el = document.getElementById("demo");
el.addEventListener("click", (event) => {
 console.log(`Clicked li index: ${event.target.attributes.index.value}`);
});
</script>

但是这样我觉得有点怪怪的，去问了一下GPT有什么其他的方式，但是回答更简单粗暴，直接用 querySelectorAll 获取到全部 li 元素之后通过 indexOf 来获取下标信息……

<ul id="demo">
  <li index="1">one</li>
  <li index="2">two</li>
</ul>
<script>
const el = document.getElementById("demo");
el.addEventListener("click", (event) => {
  const clickedLi = event.target;
  const liElements = Array.from(el.querySelectorAll('li'));
  const clickedIndex = liElements.indexOf(clickedLi);
  console.log(`Clicked li index: ${clickedIndex}`);
});
</script>