0

A page is filled to the brim with marketing scripts. Like quizes, online chats, CRM etc. There are a lot of events fired: a dialog in the chat started, a chat is submitted, a form in iframe is submitted etc.

Just CRM fires a lot of events. To read the documentation in search for the necessary event is a tedious procedure. It is Ok for me, but for now I'd like to catch any event in the document and print it to the console.

It is both for learning purposes and for self control.

I'd like to have something that can catch any event in the document. And then I'd be able to print it to the console log. Something like this:

document.addEventListener(function(event){console.log(event);}

Here 'event' means any event at all.

When I visually see this events and compare them with what I see in the screen, I'll better and quicker study the APIs of those marketing libs.

Trts
  • 985
  • 1
  • 11
  • 24

1 Answers1

0

There's no quick/good way to do so.

However, that's not something you should do in production, but is questionable even for testing purposes.

That's because there are extremely many events, given that even bubbling events will end up on document. Logging all will probably be a performance impact, and will definitely lead to a console stuffed with a lots of events.

That being said, here are some ways to do this:

  1. Adding listeners for events you're interested in

    Create some code like this:

    const events = ['load', 'click', 'auxclick', 'keyup'] //Add/remove anything to this array 

for(const event of events)
  document.addEventListener(event, console.log)

    And add any events you're interested in.

  2. Use your browser's DevTools (or whatever it's called)

    Modern browsers' developer tools allow to listen for and break on specific events (though you can select them all if you want to).

  3. Abuse the on-properties

    EventTargets usually expose their events via properties named onevent. You can loop though those and use them to add listeners.

    for(const property of Object.getOwnPropertyNames(document))
  if(property.startsWith('on'))
    document.addEventListener(property.slice(2), console.log)

    However, even this one will omit events (e.g. DOMContentLoaded does not have an on-property)

FZs
  • 16,581
  • 13
  • 41
  • 50
  • Could you tell me about point 2 - dev tools. Do you mean that browsers already have what I need? Which browser? I have FireFox and Chrome, but I can install any. If Chrome allows this, where to look? – Trts Jul 18 '21 at 08:12
  • @Trts I use Chrome, and it has a feature for *breaking* on events (not logging them). In Chrome, this is found at: Sources tab > Right panel > Event Listener Breakpoints. There's a list of grouped, selectable list of events. When one of the ticked events is emitted, execution will stop, just like when the code hits a breakpoint. Firefox also has this feature, see https://developer.mozilla.org/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints. Apparently, FF can also *log* the events instead of breaking on them. – FZs Jul 18 '21 at 09:17