本文详解如何通过 `element.matches()` 方法，准确识别并响应具有多个 class 的元素上的事件，避免 `classname` 全等匹配导致的失效问题，提升事件委托的健壮性与可维护性。
在实际开发中，一个 DOM 元素常同时拥有多个 CSS 类（如 ），此时若使用 event.target.className === "deleteButton" 判断，会因 className 返回完整字符串（如 "bookButton1 deleteButton"）而永远不匹配，导致事件逻辑失效。
✅ 正确做法是使用现代 DOM API 提供的 Element.prototype.matches(selector) 方法——它支持 CSS 选择器语法，能精准判断目标元素是否符合某一类选择器条件，且完全兼容多类场景：
const deleteObject = document.querySelector("main");
deleteObject.addEventListener("click", (event) => {
// ✅ 推荐：使用 matches('.deleteButton') 精准匹配含该类的任意元素
if (event.target.matches(".deleteButton")) {
// 安全移除整个书目区块（<p> + <button> 同级包裹）
const button = event.target;
const bookParagraph = button.previousElementSibling; // 获取前一个兄弟元素（即 .book1/.book2）
if (bookParagraph && bookParagraph.matches("p[class^='book']")) {
button.parentElement.removeChild(bookParagraph); // 先删文本
button.parentElement.removeChild(button); // 再删按钮
}
}
});⚠️ 注意事项：
- matches() 返回布尔值，支持任意合法 CSS 选择器（.deleteButton、button.deleteButton、甚至 [data-action="delete"]），语义清晰、扩展性强；
- 避免依赖 className 字符串操作（如 includes()），因其易受空格、顺序、动态类增删影响，可靠性低；
- 若需支持 IE，可使用 msMatchesSelector 回退（但现代项目建议直接忽略 IE）；
- 本例中结构为
+
? 进阶建议：
为提升可维护性，可将删除逻辑封装为独立函数，并结合 data-* 属性明确关联关系（例如
...
总之，element.matches() 是处理多类元素事件绑定的标准化、推荐方案——简洁、可靠、语义化，应作为前端事件委托的首选判断方式。
