拦截浏览器中的所有 UI 事件答案

【问题标题】：Intercepting all UI events in browser拦截浏览器中的所有 UI 事件
【发布时间】：2012-11-22 15:35:41
【问题描述】：

有没有办法拦截浏览器中的所有 UI（触摸/点击等）事件（用于监视/调试等） - 在 JavaScript 代码和任何 Chrome 工具中 - 一切顺利。例如，我想标记一些事件（通过添加一些属性）并在处理它时捕获它（甚至不止一次）以查看堆栈跟踪等

更新：寻找拦截每个事件即使没有在代码的某处传播（冒泡/捕获）。

【问题讨论】：

标签： javascript google-chrome dom-events

【解决方案1】：

您可以从Event 构造函数中获取事件类型列表。

Object.keys(Event).forEach(function (etype) {
    document.addEventListener(
        etype.toLowerCase(), console.log.bind(console), false
    );
});

Event interface 公开的事件类型常量如下（在桌面 Safari 中）：

["MOUSEOUT", "FOCUS", "CHANGE", "MOUSEMOVE",
 "SELECT", "BLUR", "KEYUP",   "MOUSEDOWN", "MOUSEDRAG",
 "MOUSEUP", "MOUSEOVER", "CLICK", "DBLCLICK",
 "KEYDOWN", "KEYPRESS", "DRAGDROP"]

【讨论】：

如果某个特定事件没有在代码中的某处传播（冒泡/捕获）（问题已编辑），该怎么办？
@BreakPhreak，然后您可以使用 WebInspector。请参阅时间线选项卡、JavaScript 和事件面板。它记录所有订阅的事件处理程序。
刚刚在此页面上尝试过（单击点数上方的向上/向下箭头以获取答案）- 看起来可行！ :)