This content originally appeared on Go Make Things and was authored by Go Make Things
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');
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-04-27T14:30:00+00:00) Custom event naming conventions in vanilla JS. Retrieved from https://www.scien.cx/2021/04/27/custom-event-naming-conventions-in-vanilla-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.