[英]Listen to all events in Chrome browser
我想聽聽我網站上發生的所有事件。 我使用了monitorEvents()命令,但是此命令僅將事件打印到控制台,並且我想為其設置一個回調函數以對該數據進行一些操作,而無需將其打印到控制台。
有什么聰明的方法可以做到這一點嗎?
您可以嘗試如下操作:
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);
}
}
我找到了最好的方法。 該代碼基於原始的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", "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);
Firebug在內部使用類似於Paul Rad的解決方案的功能,並具有以下事件列表:
["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"]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.