To capture all events you'll need to add event listeners to the DOM for each event.
There are a lot of events to capture and this is laborious. I know because I've had to do this in a project i'm currently working on.
Normally in a SO answer it's advisable to place all the relevant text into the answer, in this instance because of the number of events available, I'm not going to do that. You can find a detailed list of DOM Events here (MDN)
Now fortunately for you events can be captured regardless of what triggers them. Underneath, JQuery most likely triggers DOM events although as I haven't looked at the JQuery source, I couldn't say for sure.
When adding event listeners, you'll want to pass a boolean set to true for useCapture on the addEventListener function.
target.addEventListener(type, listener, useCapture);
Further documentation on addEventListener here
It's likely you'll want to declare a JSON array of events you want to capture, or a static array in your code so that you can maintain the list of events you wish to capture.
Furthermore for triggering events, you'll need to store a reference to the element that they targeted. I've had to do this as well. You'll want to find a way to get the selector for whatever element fired the event.
something like the following
var eventList = ['click', 'keydown'];
for(var i = 0;i < eventList.length; i++) {
var eventName = eventList[i];
document.addEventListener(eventName, function (evt) {
var selector = getElementSelector(evt.target); // where getElementSelector will be a function that returns an id, css path or xpath selector.
var captured = { eventName: eventName, selector: selector };
});
}
To trigger the captured event you might do the following, assuming you use the object structure above
var eventObject = { eventName: 'click', selector: '#targetId'};
var target = document.querySelector(eventObject.selector);
var event = new Event(eventName, {
view: window,
bubbles: true,
cancelable: true
});
target.dispatchEvent(event);
There is a caveat, for each event captured, you'll want to capture properties on the event that may be specific to that event type, and save that in your custom object that stored event properties like eventName, selector and the like.
The 'standard' form of new Event won't suffice. Some events have different initialisation dictionaries which will be ignored by a plain Event if the properties aren't standard for the Event and this is why you should instantiate the correct object type, e.g. new MouseEvent, new KeyboardEvent. etc.
You can use new CustomEvent for capturing synthetic events that add none standard properties to the detail property of the event, but this will not suffice for regular DOM events.
It's not a small task by any measure.
