Javascript/DOM event name convention

Unfortunately, it's not so simple when you deal with legacy conventions. And DOM Events have a lot of history behind them.

Here's how type attribute of Event is defined in DOM2 Events specification:

Interface Event (introduced in DOM Level 2)
type (of type DOMString, readonly)

The name of the event (case-insensitive). The name must be an XML name.

The reasoning behind this, I suppose, is explained by this paragraph in the same doc:

In HTML 4.0, event listeners were specified as attributes of an element.[...] In order to achieve compatibility with HTML 4.0, implementors may view the setting of attributes which represent event handlers as the creation and registration of an EventListener on the EventTarget.

Now, while the stance has changed in DOM3 (where event names are case-sensitive), the original approach is, I suppose, ofter considered to be the safest bet - so one won't have to depend on user agents' correctness (check this discussion and this funny issue as examples).

Note that W3C itself has registered a whole slew of PascalCased events in DOM2 (all the MutationEvents, DOMActivate, DOMFocusIn and DOMFocusOut).

As far as I can tell, there is no official practice regarding that subject. It seems to me that since camelCase is the generally accepted standard for names in js, that the same would apply with event naming. However, as you noted, js itself and many libraries do otherwise. I have seen both conventions used by great programmers, so I believe it is simply inconsequential. In the case of "the longest JavaScript event name ever" that's a great example of an event that should have used camelCase, in my opinion...or maybe they could have just shortened it :)

If you want to stick to what you've seen more often, use lowercase. If you think that's hard on the eyes (I do), use camelCase. I probably wouldn't use anything else if you're trying to conform to a standard.

I like how Bootstrap works: hidden.bs.modal

HOWEVER:As mentioned in @raina77ow 's answer, you should follow the DOM2 spec.

The spec mentions following XML naming guidelines:https://www.w3.org/TR/1998/REC-xml-19980210#NT-Name

From what I've gathered:

• use lowercase if possible
• you can use any of these characters to help namespace . - _ :
• I would use any of these. probably like this apporlibraryname:componentname.eventtype

My reasoning for his is because sometimes you have separate apps or libraries that could be completely independent widgets. At a glance it's easy to identify where this thing event lives with a : The component precedes a . because most components are written as objects.