事件回调中可解构event.target或currenttarget属性，需括号包裹；推荐用默认值兜底防空，dataset属性按驼峰解构，委托时按需区分target与currenttarget。

在事件回调中使用对象解构提取目标参数，核心是把事件对象（event）当作普通 JS 对象来解构，重点取 event.target 或 event.currentTarget 的属性，比如 value、name、id 等。

直接从 event.target 解构常用属性

多数场景下，你关心的是用户操作的元素本身。可以直接在参数位置解构 event.target 的属性，但注意：必须用括号包裹解构表达式，因为 event 本身是对象，不能直接对 event.target.xxx 解构。

✅ 正确写法（带括号）：

input.addEventListener('input', ({ target: { value, name } }) => {
  console.log(name, value); // 如：'username', 'john'
});

⚠️ 常见错误（缺少括号会报语法错）：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

// ❌ 错误：JS 会认为你在解构 event，而不是 event.target
(input, { target: { value } }) => { ... }

安全解构：防止 target 为空或属性不存在

某些事件（如键盘事件、自定义事件）的 target 可能为 null，或目标元素没有 value 属性（如 <div>）。建议用默认值 + 可选链（需环境支持）或提前判断。 <ul> <li>用默认值兜底（推荐，兼容性好）：</li> </ul> <pre class="brush:php;toolbar:false;">button.addEventListener('click', ({ target = {} }) =&gt; { const { id = '', dataset = {}, tagName = '' } = target; console.log(id, dataset.userId, tagName); });</pre> <ul> <li>用可选链 + 空值合并（现代写法，需 ES2020+）：</li> </ul> <pre class="brush:php;toolbar:false;">input.addEventListener('change', ({ target }) =&gt; { const value = target?.value ?? ''; const name = target?.name ?? ''; });</pre> <h3>解构自定义 data 属性（dataset）</h3> <p>HTML 中的 <code>data-xxx 属性会映射到 element.dataset，解构时注意命名转换规则（data-user-id → userId）：

<button data-user-id="123" data-role="admin">删除</button>

btn.addEventListener('click', ({ target: { dataset: { userId, role } } }) => {
  console.log(userId, role); // "123", "admin"
});

⚠️ 注意：dataset 是 DOMStringMap，不是普通对象，但解构行为一致；若属性名含短横线，必须按驼峰规则写（data-api-url → apiUrl）。

区分 target 和 currentTarget，按需解构

当事件委托时，target 是实际触发事件的子元素，currentTarget 是绑定监听器的父元素。需要哪个就解构哪个：

ul.addEventListener('click', ({ target, currentTarget }) => {
  // 点击 li 时，target 是 li，currentTarget 是 ul
  if (target.tagName === 'LI') {
    const { id, dataset } = target; // 解构具体点击的 li
    console.log('Clicked item:', id);
  }
});