Is there any way to see which events are being executed with JS.

For example, let's assume I have click event being fired, and then keypress...Now I want to have a log of those fired events.

Is there a way I can get such log of fired events (possibly with function names, but that is optional)?

EDIT: I think I need to add a detail to this. I want to log all events. If there is some custom event that I am not aware of, I want to know its name. For that reason I can not monitor only certain events that I am aware of, but also those that I am not.

EDIT 2: Log should only contain events for elements on which certain listener is attached. E.g. via $('#test-element').on(...) or testElement.addEventListener(...). Again, names of events are unknown (don't have to be click/keypress/...).

Is there any way to see which events are being executed with JS.

For example, let's assume I have click event being fired, and then keypress...Now I want to have a log of those fired events.

Is there a way I can get such log of fired events (possibly with function names, but that is optional)?

EDIT: I think I need to add a detail to this. I want to log all events. If there is some custom event that I am not aware of, I want to know its name. For that reason I can not monitor only certain events that I am aware of, but also those that I am not.

EDIT 2: Log should only contain events for elements on which certain listener is attached. E.g. via $('#test-element').on(...) or testElement.addEventListener(...). Again, names of events are unknown (don't have to be click/keypress/...).

• javascript
• logging
• google-chrome-devtools
• dom-events
• firefox-developer-tools

• Possible duplicate of Log javascript errors in Chrome? – Thecave3 Commented Aug 20, 2019 at 8:46
• Possible duplicate of How do I handle a click anywhere in the page, even when a certain element stops the propagation? – Alex Pappas Commented Aug 20, 2019 at 8:48
• Maybe this is what you are after stackoverflow./questions/10213703/… – Henrik Hansen Commented Aug 20, 2019 at 8:48

6 Answers 6

Fill Array with listners you want to attach and then log their type;

['click','onkeypress'].forEach( evt => 
        element.addEventListener(evt, log, false)
);

log = (event) => {
    console.log(event.type)
}

You can try this

    var oldListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, useCapture, wantsUntrusted ){
        const oldEventHandler = listener;
        listener = function(event){
            EventTarget.log = EventTarget.log || [];
            EventTarget.log.push("day? hour? minute? "+type);
            oldEventHandler(event);
        }
        oldListener.call(this, type, listener, useCapture, wantsUntrusted)
    }

And then type EventTarget.log in console

To log the event on click (replace window with the exact event target):

window.addEventListener("click", () => {
    console.log("Element clicked?");
  });

To log enter keypress:

window.addEventListener('keypress', e => {
    let key = e.which || e.keyCode;
    if (key === 13) { // 13 is enter. you may use other numbers for other keys
     console.log('Enter pressed');
   }
});

To log all events use the array:

['click','mouseover', 'keypress'].forEach(ev => {
    window.addEventListener(ev, () => {
        console.log('event:', ev)
    })
})

List of available events:

https://developer.mozilla/en-US/docs/Web/Events

Logs can be seen in the browser console (F12)

Chrome is proposing a monitoring function that you can use : monitorEvents

If I remember correctly, the following javascript line should log everything:

monitorEvents(document);

If you want to only watch specific events, you can use the second argument:

monitorEvents(document, 'click');

You are of course free to replace document by any object you want to watch.

What I fond useful is Firefox Dev Tools. When inspecting an element you have a label "event". By clicking on the label you can see events attached to the element.

Use console.log("Your text");

You will see this output by pressing F12 on your browser, on the console section.