JavaScript事件处理中不能直接解构event对象，而应解构其target等可读属性；React需通过e.target解构value/name，Vue需在方法内处理，原生事件同理，且须注意target存在性与兼容性。
在 JavaScript 组件（如 React、Vue 或原生 DOM 事件）中使用对象解构提取 event 对象属性时，关键在于：**不能直接对 event 参数本身解构（因为它是只读的 Event 实例），而应解构其可读属性（如 target、currentTarget、key、value 等）**。常见错误是试图写成 ({ target, value }) => {...} —— 这会报错，因为 event 不是普通对象，且 value 并非所有事件都自带（比如 click 事件就没有 value）。
React 中正确解构 event 属性
React 的合成事件（SyntheticEvent）对象支持标准 DOM 属性访问，但需注意：必须先访问 event.target，再从中解构。直接解构 event 无效。
- ✅ 正确写法（函数内解构）：
onChange={(e) => { const { value, name } = e.target; console.log(name, value); }}
- ✅ 更简洁的箭头函数写法（推荐）：
onChange={({ target: { value, name } }) => console.log(name, value)}
立即学习“Java免费学习笔记（深入）”；
- ⚠️ 错误写法（会报错或取不到值）：
onChange={({ value, name }) => ...} // ❌ event 本身没有 value/name
Vue 中在模板里解构 event 属性
Vue 模板不支持直接解构参数，但可在方法中处理。组合式 API（setup）中可结合箭头函数或方法内部解构：
- 模板中传入完整 event：
<input>
- 方法中解构（推荐）：
const onInput = (e) => { const { value } = e.target; console.log(value); };
- 也可用计算属性或
v-model避免手动处理 event（更 Vue 风格）。
原生 DOM 事件监听中的解构
原生 addEventListener 同样适用相同逻辑：
- ✅ 安全解构方式：
inputEl.addEventListener('input', ({ target }) => { const { value, name } = target; });
- ✅ 若需兼容旧浏览器（如 IE），避免箭头函数中直接解构，改用传统函数 + 显式访问：
inputEl.addEventListener('input', function(e) { const value = e.target.value; });
注意事项和常见陷阱
-
event是合成事件或原生 Event 实例，不是 plain object，无法直接解构自身属性（如type、preventDefault可读，但value不在其上）； - 表单控件的
value在e.target上，但textarea、select、input[type="text"]才有；checkbox和radio要读e.target.checked； -
解构前建议检查
e.target是否存在，尤其在自定义事件或异步回调中； - React 中事件处理函数执行完后，
event会被池化（pooled），若需异步使用，应先调用e.persist()（React 16.x）或改用useRef缓存值（React 17+）。
