Is there any way to replace deprecated CustomEvent.initCustomEvent() in Javascript?

Question

deprecated CustomEvent.initCustomEvent() how can I replace for code improvement on my old code.

Answer 1

Googling “JS initCustomEvent deprecated” will find several relevant results, including the relevant documentation.

The documentation on MDN is pretty clear:

Rather than using the feature, instead use specific event constructors, like CustomEvent(). The page on Creating and triggering events gives more information about the way to use those.

The latter link includes a section titled The old-fashioned way which shows exactly how the older API was used, along with the modern API usage.

Note that initEvent and many related methods are deprecated, just like initCustomEvent, but also initMessageEvent, initUIEvent, etc. The documentation there says (sans the bold formatting and redundant links):

Do not use this method anymore as it is deprecated.

Instead use specific event constructors, like Event(). […]

The See also section also links to:

The constructor to use instead of this deprecated method: Event(). More specific constructors can be used too.

The only difference between initEvent and initCustomEvent is that the latter accepts an additional detail parameter. They are otherwise identical in their usage. document.createEvent instantiates a new Event object, but since their constructors can be used, nowadays it’s essentially obsolete. document.createEvent("CustomEvent") creates a CustomEvent, and so does document.createEvent("customevent"): the string is case-insensitive, the full list of supported event interfaces is specified by WHATWG, and document.createEvent("Event") creates a generic Event object.

The documentation provides examples of how to use initCustomEvent. You can compare this to the usage of the modern CustomEvent API.

Deprecated way of initializing a custom event:

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

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

Use this instead:

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

In either case, in order to listen for it and dispatch it, this code remains the same:

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

In both examples,

• event will be a CustomEvent,
• type is some string representing the kind of the event, e.g. switchLampOn or animalCall or whatever,
• detail is some custom data associated with the event — can be anything —,
• eventTarget is some EventTarget,
• eventListener is some function or EventListener.

canBubble and cancelable are boolean arguments in the deprecated approach. bubbles and cancelable are boolean properties of the CustomEventInit object in the modern approach. The CustomEventInit object is the second argument of the CustomEvent constructor.

For more information on what “bubbling” — and “capturing” — mean, see MDN: Event bubbling and capture and Stack Overflow: What is event bubbling and capturing?. For more information on what “cancelable” does, see MDN: the Event.prototype.cancelable property, preventDefault.

---

Brief history overview:

There was a time before DOM was specified, but old Internet Explorer and Netscape did their own thing with events. The de-facto implementations from this era are informally referred to as “DOM Level 0”.

• DOM Level 1 was specified in 1998 – 2000, but deferred specifying an event model to future specs.
• DOM Level 2 introduced initEvent et al. in 2000.
• DOM Level 3, finished in 2004 introduced CustomEvent.
• DOM Level 4, the current work, made all Event interfaces constructable, rendering createEvent obsolete.