事件委托是什么?target 和 currentTarget 有何区别?
利用事件传播,在父节点集中处理子元素的交互。
参考答案
事件委托把监听器绑定在共同祖先上,通过冒泡处理后代触发的事件。event.target 是事件目标,event.currentTarget 是正在执行该监听器的元素。
JavaScript
list.addEventListener("click", event => {
if (!(event.target instanceof Element)) return;
const button = event.target.closest("button[data-id]");
if (button && list.contains(button)) {
console.log(button.dataset.id);
}
});
使用 closest 可兼容点击按钮内部图标的情况。并非所有事件都会冒泡;Shadow DOM 的重定向、传播被阻止等情况也需要单独考虑。