javascript自定义dom事件并传参的核心是创建customevent对象并调用dispatchevent()，通过detail属性传递任意类型数据，监听时从e.detail读取，支持冒泡和取消，需确保目标为有效dom节点。

在 JavaScript 中自定义派发 DOM 事件并传递参数，核心是两步：创建一个可携带数据的事件对象（如 CustomEvent），再用 dispatchEvent() 派发到目标元素上。

使用 CustomEvent 传参（推荐）

CustomEvent 是专门用于自定义事件的构造函数，支持通过 detail 属性传入任意类型的数据（对象、字符串、数字等）。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

• 创建事件时，把参数放在 detail 选项里：

const event = new CustomEvent('myAction', {
  detail: { id: 123, message: 'Hello from custom event!' }
});

• 绑定监听时，从 event.detail 中取值：

element.addEventListener('myAction', (e) => {
  console.log(e.detail.id); // 123
  console.log(e.detail.message); // 'Hello from custom event!'
});

• 派发事件：

element.dispatchEvent(event);

兼容老浏览器的写法（可选）

如果需支持 IE9–10，可用 document.createEvent + initCustomEvent，但不推荐新项目使用。现代浏览器中 CustomEvent 构造函数已全面支持（包括 IE11+）。

注意细节

• 事件名区分大小写，建议全小写、用短横线分隔（如 user-login），避免和原生事件冲突；
• detail 中的数据是只读的，修改它不会影响原始对象（因为它是深拷贝后的副本）；
• 若需冒泡或可取消，可在构造时加 bubbles: true 或 cancelable: true；
• 派发目标必须是有效的 DOM 节点（不能是 null 或未挂载元素）。

完整示例

const btn = document.getElementById('myBtn');

btn.addEventListener('click', () => {
  const custom = new CustomEvent('dataReady', {
    bubbles: true,
    detail: { value: 42, timestamp: Date.now() }
  });
  btn.dispatchEvent(custom);
});

document.addEventListener('dataReady', (e) => {
  console.log('收到数据：', e.detail);
});

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南