当元素拥有多个 css 类时，直接用 `classname === "targetclass"` 无法准确匹配，应改用 `element.matches('.targetclass')` 进行选择器级判断，确保事件仅响应目标类名。
在实际开发中（如图书预订系统），按钮常需同时具备功能类（如 deleteButton）和样式类（如 bookButton1），此时若依赖 event.target.className === "deleteButton"，会因 className 返回完整字符串（例如 "bookButton1 deleteButton"）而匹配失败。
✅ 正确做法是使用现代 DOM API 提供的 Element.matches() 方法——它支持 CSS 选择器语法，可精准判断元素是否包含指定类名，且不区分类名顺序或数量：
const deleteObject = document.querySelector("main");
deleteObject.addEventListener("click", (event) => {
// ✅ 精准匹配：只要元素有 .deleteButton 类即触发
if (event.target.matches(".deleteButton")) {
// 安全移除整个条目（<p> + <button> 同级容器）
const bookParagraph = event.target.previousElementSibling;
if (bookParagraph && bookParagraph.matches("p")) {
event.target.parentElement.removeChild(bookParagraph);
event.target.parentElement.removeChild(event.target);
}
}
});⚠️ 注意事项：
- matches() 返回布尔值，语义清晰、兼容性好（IE9+，现代浏览器全覆盖）；
- 避免使用 className.includes("deleteButton") —— 存在误匹配风险（如类名为 "deleteButtonActive" 也会被命中）；
- 删除逻辑建议增强健壮性：优先通过 DOM 结构关系（如 previousElementSibling）定位关联元素，而非硬编码 parentElement.parentElement，防止结构微调导致脚本失效；
- 若未来需支持批量删除或动画过渡，可进一步封装为独立函数并添加 data-* 属性标识数据源。
总结：element.matches('.className') 是处理多类名元素事件委托的推荐方案——简洁、可靠、符合语义，应作为替代 className 字符串比对的标准实践。
