javascript/DOM event name convention

javascript/DOM event name convention

Hi when I started doing web development, I realized javascript event names
were all in lower case with no separators, i.e. "mousedown", "mouseup",
etc. And when working with the jQuery UI library, I noticed they also use
the same convention; i.e. "dropdeactivate" as in the following example
javascript $( ".selector" ).on( "dropdeactivate", function( event, ui ) {} )
While this works well for names that are only 2 or 3 words, it is really
awful for names with more words on it.
Despite of this I followed that convention too when I have to fire custom
(synthetic) events that I created, until recently when I decided it was
better to start using some form of separator. Now I use something like
"drop:deactivate", or "app:ready".
on iOS apple recently added this event for the HTML 5 Airplay API, and I
agree with the autor of this post
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review when
he says:
I think "webkitcurrentplaybacktargetiswirelesschanged" has won the record:
the longest JavaScript event name ever.
What is the reason behind this weird convention? why not use any form of
separator or camelCase convention to name the events in a more readable
way?
I think there is a reason for that, lot of clever people worked on this...
But after a while I'm still wondering why?