Прослушивание всех событий в браузере Chrome

Я хочу слушать все события, которые происходят на моем сайте. Я использую команду monitorEvents(), но эта команда только выводит событие на консоль, и я хочу установить функцию обратного вызова для того, чтобы сделать некоторые манипуляции с этими данными, не печатая их на консоли.

Есть ли разумный способ сделать это?

3 ответа

Я нашел лучший способ сделать это. Этот код основан на исходной команде monitorEvents(). С помощью этого сценария можно прослушивать все события Chrome и обрабатывать их с помощью специальной функции... вам просто нужно отредактировать функцию "eventHandler". Попробуйте просто скопировать на консоль Chrome, а затем использовать: 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", "*******", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel");
 // key
 result.splice(0, 0, "keydown", "*****", "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);


Вы можете попробовать что-то вроде этого:

var eventsList = ["mousedown", "*******", "click", "dblclick", "mousemove",
 "mouseover", "mouseout", "mousewheel", "keydown", "*****", "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);
 }
}


Firebug внутренне использует что-то наподобие решения Paul Rad, со следующим списком событий:

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

licensed under cc by-sa 3.0 with attribution.