DOM 是浏览器提供的页面对象模型。修改页面前先保存需要的元素引用,避免重复查询。
const list = document.querySelector(".list");
list.addEventListener("click", (event) => {
const button = event.target.closest("button[data-id]");
if (!button) return;
console.log("点击项目:", button.dataset.id);
});上面的写法叫事件委托。事件统一绑定在父元素上,适合处理动态添加的大量子元素。