Skip to main content Accessibility Feedback

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

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

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

Because of case-sensitivity issues, avoid camelCase.

// camelCase