可直接在事件监听器回调中解构event常用属性，但箭头函数需括号包裹解构模式，且preventDefault等方法不可直接解构调用，应通过event对象显式调用以确保this正确。
可以直接在事件监听器的回调函数参数中使用解构语法提取 event 对象的常用属性，比如 target、currentTarget、type、preventDefault 等。但要注意：解构不能直接用于匿名箭头函数的参数列表（除非用括号包裹），且某些方法（如 preventDefault）需保持正确的 this 上下文。
基础写法：函数参数直接解构
适用于普通函数声明或具名/匿名函数表达式：
button.addEventListener('click', function({ target, type, preventDefault }) {
console.log(type); // 'click'
console.log(target.tagName); // 'BUTTON'
preventDefault(); // ✅ 正常工作，this 指向 event 对象
});
箭头函数中解构需加括号
箭头函数参数若要解构，必须用小括号包裹解构模式，否则语法报错：
- ✅ 正确：
(event) => { ... }或({ target, preventDefault }) => { ... } - ❌ 错误：
{ target } => { ... }（语法错误）
示例：
input.addEventListener('input', ({ target, currentTarget }) => {
console.log(target.value); // 输入框当前值
console.log(currentTarget.id); // input 元素的 id
});
解构方法时注意 this 绑定
preventDefault、stopPropagation 是实例方法，解构后直接调用会丢失 this，导致报错：
- ❌ 错误写法：
const { preventDefault } = event; preventDefault();→TypeError: Illegal invocation - ✅ 安全写法：保留原对象调用，或用
bind（不推荐）、或解构时用箭头函数内联调用
推荐做法是不解构方法，只解构只读属性；方法仍通过 event 调用：
btn.addEventListener('click', (event) => {
const { target, type, clientX, clientY } = event; // 安全解构只读属性
console.log(`${type} at (${clientX}, ${clientY})`);
event.preventDefault(); // ✅ 显式调用，this 正确
});
进阶：按需解构 + 默认值 + 重命名
可结合解构默认值和别名，提升可读性与健壮性：
form.addEventListener('submit', ({
target: formEl,
currentTarget: boundForm,
preventDefault: stopSubmit = () => {}
}) => {
stopSubmit(); // 实际仍是 event.preventDefault()
console.log('Submitted:', formEl.action);
});
不复杂但容易忽略的是 this 绑定问题——解构方法需谨慎，优先解构属性，方法保持原对象调用更安全可靠。
