How do I get a list of all GlobalEventHandlers?

Question

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

How do I get a list of all the properties of GlobalEventHandlers?

Specifically, I want to test if a passed string is a property of GlobalEventHandlers, something like:

console.log(GlobalEventHandlers.includes('onClick')); // true
console.log(GlobalEventHandlers.includes('fizzBuzz')); // false

A look here might be helpful https://stackoverflow.com/questions/1475337/how-to-list-all-registered-events-of-a-dom-node-using-javascript — Asons, Mar 30 '18 at 11:59
Thanks @LGSon, it seems relevant but can't see any solution to my problem unfortunately — ESR, Mar 30 '18 at 12:03
@JO3-W3B-D3V my question is what would I loop over? Once I have the Object/Array containing all the GlobalEventHandlers then yes of course I can loop through them. — ESR, Mar 30 '18 at 12:20
@epascarello, I can build a list manually, but I would rather retrieve the list from the browser, which seems like it should be possible, I just don't know how. — ESR, Mar 30 '18 at 12:20

score 3 · Accepted Answer · answered Mar 30 '18 at 13:18

3

The only real way to get all of them is to build the list yourself, but you can loop over the keys in the window object and look for keys that start with on

Object.keys(window).filter(k => !k.indexOf('on'))

BUT that is not going to return just the built in ones. If someone set a custom event listener like

window.onfoobar = function () {}

than that will also show up in the result.

answered Mar 30 '18 at 13:18

epascarello

204,599
20
195
236

Thanks, I think for my use-case this will work. I can do `if (Object.keys(window).includes(key.toLowerCase()))` since I'm using react, I have `onClick` instead of `onclick`. – ESR Mar 30 '18 at 13:29
@EdmundReed but that means someone could use non event stuff and it would be seen as an event.... aka `frames, innerHeight, etc` – epascarello Mar 30 '18 at 13:32

score 2 · Answer 2 · answered Apr 11 '19 at 09:26

I wrote an npm package that does that for you.

Full usage and installation: global-event-handlers-map.

it extracts every global event handler under every object that exists under window (including window).

for example, by calling:

const getGlobalEventsHandlersMap = require('global-event-handlers-map');

const gehsMap = getGlobalEventsHandlersMap('WebSocket');

you will get the following result (gehsMap would be):

{
  "WebSocket": [
    "onopen",
    "onerror",
    "onclose",
    "onmessage"
  ]
}

by calling getGlobalEventsHandlersMap() with no arguments, you will receive ALL global event handlers.

the README file should be very indicative and should help you understand how to get everything you need from that package.

you can either:

execute the code once in the browser, get the results, and use that map statically in your code.
integrate the library in your code and by that dynamically create the map every time your code runs in the browser.

the best way depends on your needs, and should be your call. i can help you understand which way is best for you depends on your needs.

hope that helps!

How do I get a list of all GlobalEventHandlers?

2 Answers2