在 Chrome 浏览器中收听所有事件答案

【问题标题】：Listen to all events in Chrome browser在 Chrome 浏览器中收听所有事件
【发布时间】：2014-03-10 16:35:29
【问题描述】：

我想收听我网站上发生的所有事件。我使用monitorEvents() 命令，但该命令仅将事件打印到控制台，我想为其设置一个回调函数来对数据进行一些操作而不将其打印到控制台。

有什么聪明的方法可以做到这一点吗？

【问题讨论】：

标签： javascript google-chrome google-chrome-devtools dom-events

【解决方案1】：

你可以试试这样的：

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);
  }
}

【讨论】：

【解决方案2】：

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"]

【讨论】：

【解决方案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", "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);

【讨论】：