JavaScript event log

Question

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/...).

Possible duplicate of [Log javascript errors in Chrome?](https://stackoverflow.com/questions/37401094/log-javascript-errors-in-chrome) — Thecave3, Aug 20 '19 at 08:46
Possible duplicate of [How do I handle a click anywhere in the page, even when a certain element stops the propagation?](https://stackoverflow.com/questions/8054429/how-do-i-handle-a-click-anywhere-in-the-page-even-when-a-certain-element-stops) — Alex Pappas, Aug 20 '19 at 08:48
Maybe this is what you are after https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools — Henrik Hansen, Aug 20 '19 at 08:48

score 2 · Answer 1 · edited Sep 05 '19 at 18:10

2

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.

edited Sep 05 '19 at 18:10

marc_s

732,580
175
1,330
1,459

answered Aug 20 '19 at 08:48

JardonS

427
3
12

Is there a way to call this only for registered event listeners. For example for $('#test').on('click', ....) or testElement.addEventListener('click', ....). It seems like this solution fires for every event called, which is understandable, but I want it to be fired for every registered event. – dodo254 Aug 20 '19 at 09:06
I edited the answer with a little more info, you can find full documentation folowing the link in my answer. – JardonS Aug 20 '19 at 09:55
Just as a note, `monitorEvents()` was originally implemented in Firebug. There's also a [feature request to implement it into the Firefox DevTools](https://bugzilla.mozilla.org/show_bug.cgi?id=1165138). – Sebastian Zartner Jan 22 '21 at 20:14

score 2 · Answer 2 · answered Aug 20 '19 at 08:49

2

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)
}

answered Aug 20 '19 at 08:49

Akash Salunkhe

2,698
2
16
31

I have edited my question a bit since I think it misses an important detail. I cannot hardcode which evets to monitor. I need to monitor all of existing events. Even those I am not aware of. – dodo254 Aug 20 '19 at 08:55

score 2 · Answer 3 · answered Aug 20 '19 at 09:24

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

Vince · Answer 4 · 2019-08-20T09:24:34.007

1

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.org/en-US/docs/Web/Events

Logs can be seen in the browser console (F12)

edited Aug 20 '19 at 09:24

answered Aug 20 '19 at 08:47

Vince

149
4

Unfortunately, there are events I am not aware of so I can not hardcode events :/ – dodo254 Aug 20 '19 at 09:07
In such way just do not use conditions (all keys will be logged) and leave window object. Like window.addEventListener('keypress', e => { console.log('Enter pressed'); }); – Vince Aug 20 '19 at 09:19
I've expanded my reply a bit – Vince Aug 20 '19 at 09:24

score 0 · Answer 5 · answered Mar 27 '20 at 13:17

0

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.

answered Mar 27 '20 at 13:17

dodo254

519
2
7
16

This shows which event listeners are attached to a specific element, though that doesn't tell you which of them actually get called. – Sebastian Zartner Jan 22 '21 at 20:15

score -1 · Answer 6 · answered Aug 20 '19 at 08:45

-1

Use console.log("Your text");

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

answered Aug 20 '19 at 08:45

Iñigo

1,877
7
25
55

JavaScript event log

6 Answers6