Get the event types available in the current environment

Question

I'm building a function in which I would find it useful to determine if a string is intended to specify an event type. (e.g., click, keypress, blur..) Currently, I'm comparing it to an array of names I grabbed from the standard, but I don't like this solution for a few reasons:

• It's ugly. A hard-coded array of 167 items seems awfully inelegant.

• Different browser environments likely support different events. I could use different (or additional) lists per-browser, but that just exacerbates the prior issue, and would be godawful to maintain.

• There are, I believe, situations where events can be dynamically created. I can't possibly detect those beforehand.

My search-fu seems to have failed me on this point, so I turn to my clever and generous fellow users of Stack Overflow. My question, in short, is this:

How can I get a list, at runtime, of currently recognized event types?

Answer 1

Similar to SLaks' answer, but you could run it on the window object instead to get an exhaustive list of events.

Object.keys(window).filter(function(k) { return /^on/.test(k); });

Answer 2

You don't say why you want to do this, so answers can only address the specific question of "how to tell if a string is an 'on' event".

I don't think there's a definitive strategy for that. Using a list of all possible event types collated from implementations, standards or specifications might be reasonably reliable but will not be perfect since javascript implementations are free to introduce any new type of event they wish. So the list would need to be updated frequently and you'd have to at least test and possibly update the list on every new browser and version that is released. Also, all events may not be supported by all browsers.

Using strategies like collecting the enumerable "on" properties of a DOM object or it's prototype also don't suit since hosts aren't required to implement inheritance on DOM objects and some don't make them enumerable (such as Safari v9 at least).

Another solution is to see if 'on' + string is a standard property of a DOM object, so:

function isPossibleEventName(s) {
  var div = document.createElement('div');
  return ('on' + s) in div;
}

['click','input','blur','foo','bar','paste'].forEach(function(s){
  document.write('<br>Possible event ' + s + ': ' + isPossibleEventName(s));
});

That will at least tell you if the host supports a particular event type, however it may need to be tested on different element types since not all elements necessarily support all events. Also, it doesn't tell you if the string might be an "on" event in some other host (but neither will collating "on" properties of an element's prototype).

While this should work in all browsers, there is some doubt if the above will work in older Firefox. However, this post says otherwise and it seems OK in version 43. You should test versions back as far as you think reasonable.

Answer 3

Here's my go-to reference, pretty comprehensive.