Javascript，创建和监听自定义事件

Question

我在创建和监听用 javascript 创建的自定义事件时遇到问题。我想我在这里遗漏了一些小东西，但我不确定是什么。这是代码:

document.body.addEventListener('launch', onLaunch);
function onLaunch(item) {
    console.log("laucnhed with", item);
}
function launch(id) {
    console.log("launch", id);
    const event = new CustomEvent("launch", {activity: id});

    document.body.dispatchEvent(event);
}

因此，第一个日志“启动”，并且 id 显示正确，但是 onLaunch 函数中的第二个日志正确触发，但是该项目没有详细信息 - 记录 item.detail 为 null。需要做什么才能正确地将事件属性传递给监听器函数？谢谢!

Answer 1

根据 Mozilla Developer Network 的文档:

CustomEvent.detail
Any data passed when initializing the event.

您需要像这样包装您的事件详细信息:

const event = new CustomEvent("launch", { detail: { activity: id } });

然后您可以将事件监听器中的日志记录更改为:

console.log("launched with", item.detail.activity);

可以在 here 找到 CustomEvent 构造函数的更详细示例。 .