直接用 event.target.dataset.index 获取 data-index 值，但需确保目标元素存在该属性；若事件绑定在父容器，应使用 event.target.closest("[data-index]") 安全查找，避免子元素无该属性导致 undefined。
data-index 在事件处理中怎么取到
直接用 event.target.dataset.index 就能拿到，但前提是元素确实有 data-index 属性，且值是字符串（即使写的是数字，读出来也是字符串）。
常见错误是绑定事件在父容器上，但点击的是子元素（比如 <button></button> 里嵌了 <span></span>），这时 event.target 是子元素，它可能没设 data-index —— 得往上找最近的带该属性的祖先。
- 推荐用
event.target.closest("[data-index]")安全获取，避免目标错位 - 如果确定结构简单、点击目标就是带
data-index的元素，event.target.dataset.index最快 - 注意大小写：
data-foo-bar对应dataset.fooBar，不是dataset["foo-bar"]
用 addEventListener 绑在列表父元素时怎么写
这是最常踩坑的场景：给 <ul></ul> 绑事件，靠事件冒泡识别点击的 <li>。关键不是“怎么绑”，而是“怎么准确抓到那个 li”。
示例 HTML：
- 苹果
- 香蕉
- 橙子
JS 写法：
document.getElementById("list").addEventListener("click", (e) => {
const li = e.target.closest("li");
if (!li) return;
const index = li.dataset.index; // 字符串 "1"
console.log(Number(index)); // 转成数字再用
});
- 不用
e.target === li做判断，因为用户可能点到li里的文字或空隙，target可能是textNode或<span></span> -
closest()兼容性 OK（IE 不支持，但现代项目基本不考虑 IE） - 如果必须兼容老浏览器，改用循环
parentNode检查hasAttribute("data-index")
为什么 dataset.index 有时是 undefined
不是 JS 错了，是 HTML 或 DOM 状态没对上。
- 元素还没渲染完成就去读 —— 比如在
innerHTML赋值后立刻遍历，得等 reflow 后再操作，或用setTimeout微任务延迟 - 属性名拼错：
data-index写成data-id或data_Index，后者根本不会进dataset - 用
setAttribute("data-index", 5)动态加属性没问题；但用.index = 5直接赋值dataset对象不会同步到 DOM，也不会触发属性变化 - Vue/React 等框架里，
data-属性可能被编译优化掉，得确认是否真输出到了最终 HTML 中
替代方案：不依赖 data 属性行不行
可以，但没必要硬绕。用 Array.from(ul.children).indexOf(li) 算索引，看似“更语义”，实际有隐患：
- 如果列表中间动态插入/删除节点，索引会偏移，而
data-index是你明确指定的逻辑序号 - 性能差一点：每次都要遍历所有子节点，
dataset是原生属性访问，O(1) - 可读性反而低 ——
data-index="3"比 “这个li是父元素的第 4 个孩子” 更直白
真正要注意的是：别把 data-index 当唯一 ID 用，它只是个临时标记；需要持久关联数据时，优先用真实 ID 或映射表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
