用户点击、输入、滚动都会触发事件。监听写在父元素上(委托),往往比给每个子节点挂监听更省事。
图:事件从目标冒泡到父节点的路径
基础写法
button.addEventListener("click", (e) => {
console.log("clicked", e.target);
});
事件委托
ul.addEventListener("click", (e) => {
const li = e.target.closest("li");
if (!li || !ul.contains(li)) return;
console.log("选中", li.dataset.id);
});
好处:列表动态增删时,不必反复绑定/解绑子项监听。