A satisfying little rant from Justin Fagnani: Stop Using CustomEvent. One point is that you’re forcing the consumer of the event to know that it’s custom and you have to get data out of the details property. Instead, you can subclass Event with new properties and the consumer of that event can pull that data […]

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

Justin Fagnani argues against using CustomEvent in JavaScript, advocating instead for subclassing the Event class directly. The main benefit is that consumers can access event data as direct properties rather than having to extract it from the details property, resulting in cleaner and more intuitive API design.

Stop Using CustomEvent – Frontend Masters Blog

It’s an interesting point of view.
But for me, when I need a custom event, CustomEvent feels more “native and intuitive” then MouseEvent or KeyboardEvent. And I don’t need any class creating process for it. CustomEvent already exists and does exactly what I want.

Dang, never knew. As usual, just searched something like “dispatch custom events” (not “CustomEvent” or similar) and it’s all stuff about <code>CustomEvent</code>, even some recent posts.
Thanks for sharing this!

Really interesting !
But why create a pour page with 2 sentences ? Just link directly to the page with explanation…

I just create my own custom event emiter class
<pre><code class="language-ts">export type EventListener&lt;T&gt; = (data: T) =&gt; void;

export class EventEmitter&lt;E extends Record&lt;string, any&gt;&gt; {
 private listeners: { [K in keyof E]?: EventListener&lt;E[K]&gt;[] } = {};

 // add a listener to a certain event
 on&lt;K extends keyof E&gt;(event: K, listener: EventListener&lt;E[K]&gt;): void {
 if (!this.listeners[event]) {
 this.listeners[event] = [];
 }

 this.listeners[event].push(listener);
 }

 // remove a listener from a certain event
 off&lt;K extends keyof E&gt;(event: K, listener: EventListener&lt;E[K]&gt;): void {
 const eventListeners = this.listeners[event];

 if (eventListeners) {
 const index = eventListeners.indexOf(listener);

 if (index &gt; -1) {
 eventListeners.slice(index, 1);
 }
 }
 }

 // Send and event, causing all listeners to be invoked with some data
 emit&lt;K extends keyof E&gt;(event: K, data: E[K]): void {
 const eventListeners = this.listeners[event];

 if (eventListeners) {
 eventListeners.forEach((listener) =&gt; listener(data));
 }
 }

 // If a certain event is passed, delete all its listeners, else reset aall the listeners
 removeAllListeners&lt;K extends keyof E&gt;(event?: K): void {
 if (event) {
 delete this.listeners[event];
 } else {
 this.listeners = {};
 }
 }
}
</code></pre>