Custom event naming conventions in vanilla JS

Over the last few days, we’ve learned about how to create custom events, how to cancel them, and how to create a helper function to make them easier to work with.

Today, we’re going to learn about naming conventions: things to do, things to avoid, and some common gotchas.

Prefix event names

To help prevent naming collisions between the custom events in your library and others, it’s a good idea to prefix them with your library name.

// Namespaced to the Greetings library
emitEvent('greetings-before-hi');

Use lowercase

You can name custom events anything you want, but as a best practice, you should use all lowercase characters.

Event names are case-sensitive, and the property names on elements are case-insensitive and converted to lowercase by the browser. This can create conflicts if uses on* listeners on elements.

One common naming convention is kebab-case.

// kebab-case naming
emitEvent('greetings-before-hi');

Another convention is to put a colon (:) between the library name and the event type. I’m personally quite fond of this approach, as I think it makes events more readable.

I call this style prefix-kebab.

// prefix-kebab naming
emitEvent('greetings:before-hi');

Because of case-sensitivity issues, avoid camelCase.

// camelCase
// AVOID THIS
emitEvent('greetingsBeforeHi');