Skip to main content Accessibility Feedback

Custom event naming conventions

This week, we looked at how to create custom events with vanilla JS, and a helper function to make things a bit easier. Today, we’re going to look at different naming conventions for custom events.

To help prevent naming collisions, it’s a good idea to prefix custom events with your library or project name.

// Namespaced to the Calculator library
emit('calculator-add');

One common naming convention is kebab-case.

// kebab-case naming
emit('calculator-add');

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
emit('calculator:add');

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 a developer uses on* listeners on elements.

Because of these case-sensitivity issues, avoid camelCase.

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