DOM 是浏览器提供的页面对象模型。修改页面前先保存需要的元素引用,避免重复查询。

JAVASCRIPT
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);
});

上面的写法叫事件委托。事件统一绑定在父元素上,适合处理动态添加的大量子元素。