JavaScript Academy · 课时

自定义事件

Q: 「自定义事件」这节课中我会学到什么？

创建并分发您自己的事件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建并分发您自己的事件。

自定义事件 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

超越内置事件

DOM 允许您使用CustomEvent创建并分发自己的事件。这可以解耦应用的各个部分：一个组件宣布某件事已经发生，其他组件无需直接引用即可监听。

创建 CustomEvent

使用 new CustomEvent(name, options) 构造一个实例。名称可以是您选择的任意字符串。

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

分发事件

使用 dispatchEvent 在目标上触发事件。目标上为该名称注册的任何监听器都会运行；如果事件会冒泡，祖先元素上的监听器也会运行。

element.dispatchEvent(new CustomEvent("cart:add"));

监听事件

使用 addEventListener 和您的自定义名称，就像监听原生事件一样进行监听。

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

使用 detail 传递数据

通过 detail 属性附加负载。监听器会从 event.detail 中读取它。

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

读取负载

在监听器内部，event.detail 保存着您传入的任何内容。它可以是任意值：对象、数组、字符串或数字。

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

让事件冒泡

默认情况下，自定义事件 NOT 会冒泡。设置 bubbles: true，这样祖先元素和委托监听器就能接收到它。

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

cancelable 选项

设置 cancelable: true，允许监听器调用 preventDefault()。事件分发方会检查 dispatchEvent 的返回值，以确定事件是否已被取消。

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

一种解耦模式

自定义事件让各个模块无需相互导入即可通信。日志记录器或分析层可以在 document 上监听整个应用范围的事件。

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

命名约定

为事件名称设置命名空间（例如 cart:add、user:login），以避免与原生事件冲突，并清晰地归类相关事件。

旧语法与新语法

您可能会在旧代码中看到旧版的 document.createEvent API。请优先使用现代的 new CustomEvent(...) 构造函数；它更简单，也是您如今唯一应该编写的形式。

const evt = new CustomEvent("ready", { detail: 1 });

快速检查

自定义事件知识检查。

回顾

使用 new CustomEvent(name, { detail, bubbles, cancelable }) 和 dispatchEvent 创建自己的事件。通过 event.detail 读取负载，为事件启用冒泡以支持委托，并使用 cancelable 实现可取消操作。自定义事件将组件解耦为清晰的发布-订阅模式。

常见问题解答

「自定义事件」课时是免费的吗？

是的 — 「自定义事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「自定义事件」这节课中我会学到什么？

创建并分发您自己的事件。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「自定义事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy