事件委托通过绑定父元素监听器并利用event.target.nodename判断子元素标签类型，需转小写比较、校验nodetype===1防误判，并可结合class或属性精准过滤。
事件委托利用事件冒泡机制，把事件监听器绑定在父元素上，通过 event.target 获取实际触发事件的子元素，再用 nodeName 判断其标签类型——这是最直接、兼容性好且无需额外库的方式。
用 nodeName 获取并判断标签名
event.target.nodeName 返回的是大写的标签名字符串（如 "DIV"、"BUTTON"、"SPAN"），注意大小写敏感。建议统一转为小写做比较，避免意外不匹配。
- 直接用
event.target.nodeName === "BUTTON"判断是否点击了 button 元素 - 更稳妥写法：
event.target.nodeName.toLowerCase() === "button" - 也可用
event.target.tagName，它和nodeName在元素节点上行为一致，但语义更明确
结合 class 或属性做更精准过滤
仅靠 nodeName 可能不够精细（比如所有 div 都会命中），常配合 className、dataset 或 getAttribute() 进一步筛选：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
if (target.nodeName === "LI" && target.classList.contains("menu-item")) { ... }if (target.nodeName === "A" && target.hasAttribute("data-action")) { ... }- 避免误判：检查
target.nodeType === 1确保是元素节点，防止文本节点被误处理
注意 nodeName 在不同节点类型的返回值
nodeName 对非元素节点返回不同值，容易引发 bug：
- 元素节点（如
<div>）→ 返回大写标签名，如 <code>"DIV" - 文本节点 → 返回
"#text" - 注释节点 → 返回
"#comment" - 所以务必先校验：
if (target.nodeType !== 1) return;或直接用target instanceof HTMLElement
完整示例：列表项点击委托
给 ul 绑定 click，区分点击的是 li、button 还是 span：
document.querySelector('ul').addEventListener('click', function(e) {
const target = e.target;
if (target.nodeType !== 1) return;
const tag = target.nodeName.toLowerCase();
if (tag === 'li') {
console.log('点击了列表项');
} else if (tag === 'button') {
console.log('点击了按钮，位于', target.closest('li')?.dataset.id);
} else if (tag === 'span') {
console.log('点击了文字区域');
}
});
