本文详解如何为列表项（li）绑定点击事件，精准提取其内部 h3 和 span 元素的文本内容，并分别赋值给 input 和 h4 元素，避免因 dom 查询时机或属性误用导致的 undefined 和静默失败问题。
本文详解如何为列表项（li）绑定点击事件，精准提取其内部 h3 和 span 元素的文本内容，并分别赋值给 input 和 h4 元素，避免因 dom 查询时机或属性误用导致的 undefined 和静默失败问题。
在原始代码中，存在几个关键性错误，直接导致功能失效：
- ❌ 提前批量查询，脱离事件上下文：document.querySelectorAll("li > h3") 返回的是 NodeList，而 NodeList.textContent 为 undefined —— 因为 textContent 是单个节点的属性，不能作用于集合。同理，fontListSecondChildText 也因同样原因为空。
- ❌ 错误使用 event.target vs event.currentTarget：当用户点击
或 时，event.target 指向实际被点击的子元素（如 h3），而非 li；但 event.currentTarget 始终指向监听器绑定的 li 元素，这才是我们所需的“当前被点击的父容器”。
- ❌ 对
使用 .value 而非 .textContent
：是普通块级元素，没有 value 属性，应使用 textContent（或 innerText）设置文本；而 才使用 value。
✅ 正确做法是：在点击事件触发后，在当前 li 上实时查找子元素，确保获取到的是该 li 内部对应的 h3 和 span 内容。
以下是优化后的完整可运行脚本（建议置于
