有什么方法可以替换 Javascript 中已弃用的 CustomEvent.initCustomEvent() 吗？

Question

已弃用的 CustomEvent.initCustomEvent() 如何替换旧代码以改进代码。

Answer 1

Googling “JS initCustomEvent deprecated” 会找到几个相关结果，包括相关文档。

documentation on MDN 很清楚：

与其使用该功能，不如使用特定的事件构造函数，例如CustomEvent()。 Creating and triggering events 上的页面提供了有关使用这些方法的更多信息。

后一个链接包含一个标题为 The old-fashioned way 的部分，它准确显示了旧 API 的使用方式以及现代 API 的使用情况。

请注意，initEvent 和许多相关方法已被弃用，就像initCustomEvent 一样，还有initMessageEvent、initUIEvent 等。 那里的文档说（没有粗体格式和冗余链接）：

不要再使用此方法，因为它已被弃用。

改为使用特定的事件构造函数，例如Event()。 […]

See also 部分还链接到：

要使用的构造函数来代替这个已弃用的方法：Event()。也可以使用更具体的构造函数。

initEvent 和initCustomEvent 之间的唯一区别是后者接受一个额外的detail 参数。 它们在其他方面的用法相同。 document.createEvent 实例化一个新的 Event 对象，但由于可以使用它们的构造函数，现在它基本上已经过时了。 document.createEvent("CustomEvent") 创建一个 CustomEvent，document.createEvent("customevent") 也是如此：字符串不区分大小写，支持的事件接口的完整列表是 specified by WHATWG，document.createEvent("Event") 创建一个通用的 Event 对象。

文档提供了如何使用initCustomEvent 的示例。 您可以将此与现代 CustomEvent API 的用法进行比较。

不推荐的初始化自定义事件的方式：

const event = document.createEvent("CustomEvent");

event.initCustomEvent(type, canBubble, cancelable, detail);

改用这个：

const event = new CustomEvent(type, { bubbles, cancelable, detail });

在任何一种情况下，为了监听它并分派它，这段代码保持不变：

eventTarget.addEventListener(type, eventListener);
eventTarget.dispatchEvent(event);

在这两个例子中，

• event 将是 CustomEvent，
• type 是一些代表事件类型的字符串，例如switchLampOn 或 animalCall 或其他，
• detail 是一些与事件相关的自定义数据 — 可以是任何东西 —，
• eventTarget 是一些EventTarget，
• eventListener 是某个函数或EventListener。

canBubble 和 cancelable 是已弃用方法中的布尔参数。 bubbles 和 cancelable 是现代方法中 CustomEventInit 对象的布尔属性。 CustomEventInit 对象是 CustomEvent 构造函数的第二个参数。

有关“冒泡” — 和“捕获” — 含义的更多信息，请参阅MDN: Event bubbling and capture 和Stack Overflow: What is event bubbling and capturing?。 有关“可取消”功能的更多信息，请参阅MDN: the Event.prototype.cancelable property、preventDefault。

---

简要历史概述：

在指定 DOM 之前有一段时间，但旧的 Internet Explorer 和 Netscape 对事件做了自己的事情。 这个时代的实际实现被非正式地称为“DOM Level 0”。

• DOM 级别 1 是在 1998 年至 2000 年指定的，但将指定事件模型推迟到未来的规范中。
• DOM 级别 2 引入了 initEvent 等人。 2000 年。
• DOM Level 3，于 2004 年完成，引入 CustomEvent。
• DOM Level 4，当前的工作，使所有 Event 接口可构造，渲染 createEvent 已过时。