monitorEvents.js

monitorEvents.js

function monitorEvents(element) {
  var log = function(e) { console.log(e);};
  var events = [];
  
  for(var i in element) {
    if(i.startsWith("on")) events.push(i.substr(2));
  }
  events.forEach(function(eventName) { 
    element.addEventListener(eventName, log); 
  }); 
}

The most common use is to monitor the document. The following snippet directly does just that:

// https://stackoverflow.com/a/72945018/319266
for (const key in document) if (key.startsWith('on')) document.addEventListener(key.slice(2), console.log);

The benefit of a function is to be able to monitor only part of the page (to reduce noise from unrelated areas), and to be able to unmonitor it without having to reload the page.

Below is a modified version that includes the missing unmonitorEvents() function to do exactly that.

// Usage:
// monitorEvents(document)
// monitorEvents(document.querySelector('#app'))
// unmonitorEvents(...)
//
// https://stackoverflow.com/a/72945018/319266
function monitorEvents(element) {
  for (const key in element) {
    if (key.startsWith('on')) {
      element.addEventListener(key.slice(2), monitorEvents.log);
    }
  }
}
monitorEvents.log = (e) => console.log(e);
function unmonitorEvents(element) {
  for (const key in element) {
    if (key.startsWith('on')) {
      element.removeEventListener(key.slice(2), monitorEvents.log);
    }
  }
}

This doesn't include events such as DOMContentLoaded.