CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtoolsdom-events
Akuka
Akuka

Reputation: 83

Listen to all events in Chrome browser

I want to listen all the events that happen in my site. I use the monitorEvents() command, but this command only prints the event to the console, and I want to set a callback function for it to do some manipulations on that data without printing it to the console.

Is there any smart way to do this?

Upvotes: 0

Views: 3667

Answers (3)

Akuka
Akuka

Reputation: 83

I found the best way to do it. This code is based on the original monitorEvents() command. With this script its possible to listen all the Chrome events and handle them with custom function… you just need edit the "eventHandler" function. For try it just copy to the Chrome console and then use: startMonitorEvents(window, eventHandler);

/**
* @param {Event} event
*/
function eventHandler(event)
{
    // Do whatever you want here... 

    console.log("my custom handler… ", event.type, event);
}

/**
* @param {Object} object
* @param {Function} callback
*/
function startMonitorEvents(object, callback)
{
    if (!object || !object.addEventListener || !object.removeEventListener)
                    return;
    var types = getEventsForMonitor();
    for (var i = 0; i < types.length; ++i) {
                    object.removeEventListener(types[i], callback, false);
                    object.addEventListener(types[i], callback, false);
    }
}

function getEventsForMonitor()
{
    var result = [];

    // mouse
    result.splice(0, 0, "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel");
    // key
    result.splice(0, 0, "keydown", "keyup", "keypress", "textInput");
    // touch
    result.splice(0, 0, "touchstart", "touchmove", "touchend", "touchcancel");
    // control
    result.splice(0, 0, "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset");
    // others
    result.splice(0, 0, "load", "unload", "abort", "error", "select", "change", "submit", "reset", "focus", "blur", "resize", "scroll", "search", "devicemotion", "deviceorientation");

    return result;
}

// Usage: startMonitorEvents(window, eventHandler);

Upvotes: 2

Paul Rad
Paul Rad

Reputation: 4882

You can try something like this:

var eventsList = ["mousedown", "mouseup", "click", "dblclick", "mousemove",
    "mouseover", "mouseout", "mousewheel", "keydown", "keyup", "keypress", 
    "textInput", "touchstart", "touchmove", "touchend", "touchcancel", "resize",
    "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"];

var callbackFunction = function(element, eventName) {
  console.log('Triggered event ' + eventName);
};

var elements = document.querySelectorAll('*');
for (var i = 0; i < elements.length; i++) {
  for (var j = 0; j < eventsList.length; j++) {
    var element = elements[i];
    var event = eventsList[j];

    element.addEventListener(event,
        callbackFunction.bind(this, element, event), true);
  }
}

Upvotes: 2

Simon Lindholm
Simon Lindholm

Reputation: 2376

Firebug internally uses something like Paul Rad's solution, with the following list of events:

["DOMActivate", "DOMAttrModified", "DOMCharacterDataModified", "DOMFocusIn", "DOMFocusOut", "DOMNodeInserted", "DOMNodeInsertedIntoDocument", "DOMNodeRemoved", "DOMNodeRemovedFromDocument", "DOMSubtreeModified", "abort", "beforeunload", "blur", "change", "click", "composition", "compositionend", "compositionstart", "contextmenu", "copy", "cut", "dblclick", "dragdrop", "dragenter", "dragexit", "draggesture", "dragover", "error", "focus", "input", "keydown", "keypress", "keyup", "load", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "overflow", "overflowchanged", "paint", "paste", "reset", "resize", "scroll", "select", "submit", "text", "touchcancel", "touchend", "touchenter", "touchleave", "touchmove", "touchstart", "underflow", "unload"]

Upvotes: 1

Related Questions