JavaScript创建自定义事件需用CustomEvent构造函数创建事件对象并调用dispatchEvent触发，监听时通过e.detail获取数据；事件传播分捕获（window→目标父级）、目标、冒泡（目标→window）三阶段，可用stopPropagation()等控制传播。
JavaScript 创建自定义事件，核心是使用 CustomEvent 构造函数配合 dispatchEvent 方法，让开发者能定义专属事件类型并传递数据。
如何创建和触发自定义事件
自定义事件不是靠 HTML 属性或内置行为触发，而是手动构造、派发：
- 用
new CustomEvent(type, options)创建事件对象，type是事件名（如"data-loaded"），options.detail可传任意数据（对象、字符串、数字等） - 调用目标元素的
.dispatchEvent(event)触发事件，该元素就是事件的“源头” - 通过
.addEventListener("data-loaded", handler)监听，回调中可通过e.detail获取传递的数据
示例：
const event = new CustomEvent("user-login", {
detail: { id: 123, name: "Alice" }
});
document.dispatchEvent(event); // 在 document 上触发
document.addEventListener("user-login", e => {
console.log("登录用户：", e.detail.name); // 输出 Alice
});
事件冒泡与捕获：两个相反的传播阶段
当一个元素（比如按钮）被点击，事件不会只停留在它身上。浏览器会按固定顺序把事件“送出去”，这个过程分两阶段：
立即学习“Java免费学习笔记（深入）”；
-
捕获阶段：事件从
window→document→ 根节点 → 逐级向下，直到目标元素的父级（不包括目标本身）。监听器需设置useCapture = true才能在此阶段响应 -
冒泡阶段：事件从目标元素开始，逐级向上传到
document，再到window。这是默认行为，addEventListener第三个参数为false或省略时即走此阶段
目标元素本身处于两个阶段之间，称为“目标阶段”，此时捕获和冒泡监听器都会执行（捕获监听器先于冒泡监听器）。
如何控制事件传播路径
常用方法有三个，都作用于事件对象 e：
-
e.stopPropagation()：阻止事件继续向上传播（冒泡）或向下传播（捕获），但不影响同一阶段其他监听器 -
e.stopImmediatePropagation()：不仅阻止传播，还立即终止当前阶段剩余所有监听器的执行 -
e.cancelBubble = true：旧写法，等价于stopPropagation()，兼容性更好但不推荐新项目使用
注意：stopPropagation() 不影响默认行为（如表单提交、链接跳转），如需阻止默认动作，应调用 e.preventDefault()。
实际开发中的典型用法
捕获常用于全局拦截，比如在 document 捕获所有点击，做权限校验或埋点；冒泡更常用，支持事件委托——把监听器绑定在父容器，通过 e.target 判断真正点击的是哪个子元素，减少监听器数量，提升性能。
例如：给动态生成的按钮统一处理点击，只需在父 上监听冒泡的 click，无需每次新增按钮都重新绑定。
