JavaScript 事件日志

Posted 2023-03-07

【中文标题】JavaScript 事件日志

【英文标题】：JavaScript event log

【发布时间】：2019-12-25 10:29:26

【问题描述】：

有什么方法可以查看哪些事件正在用 JS 执行。

例如，假设我触发了单击事件，然后按下了按键...现在我想要记录那些触发的事件。

有没有办法获得这样的触发事件日志（可能带有函数名称，但这是可选的）？

编辑： 我想我需要为此添加一个细节。我想记录所有事件。如果有一些我不知道的自定义事件，我想知道它的名称。出于这个原因，我不能只监控我知道的某些事件，还可以监控我不知道的事件。

编辑 2： 日志应仅包含附加了特定侦听器的元素的事件。例如。通过$('#test-element').on(...) 或testElement.addEventListener(...)。同样，事件的名称是未知的（不必是 click/keypress/...）。

【问题讨论】：

Log javascript errors in Chrome?的可能重复

How do I handle a click anywhere in the page, even when a certain element stops the propagation?的可能重复

也许这就是你想要的***.com/questions/10213703/…

【参考方案1】：

用您要附加的侦听器填充数组，然后记录它们的类型；

['click','onkeypress'].forEach( evt => 
        element.addEventListener(evt, log, false)
);

log = (event) => 
    console.log(event.type)

【讨论】：

我对我的问题进行了一些编辑，因为我认为它遗漏了一个重要的细节。我无法硬编码要监控的事件。我需要监视所有现有事件。甚至那些我不知道的人。

【参考方案2】：

Chrome 提出了一个可以使用的监控功能：monitorEvents

如果我没记错的话，下面的 javascript 行应该记录所有内容：

monitorEvents(document);

如果您只想观看特定事件，可以使用第二个参数：

monitorEvents(document, 'click');

您当然可以随意将文档替换为您想观看的任何对象。

【讨论】：

有没有办法只为注册的事件监听器调用它。例如对于 $('#test').on('click', ....) 或 testElement.addEventListener('click', ....)。似乎这个解决方案会为每个调用的事件触发，这是可以理解的，但我希望它为每个注册的事件触发。

我用更多信息编辑了答案，您可以在我的答案中的链接后面找到完整的文档。

请注意，monitorEvents() 最初是在 Firebug 中实现的。还有一个feature request to implement it into the Firefox DevTools。

【参考方案3】：

你可以试试这个

    var oldListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function(type, listener, useCapture, wantsUntrusted )
        const oldEventHandler = listener;
        listener = function(event)
            EventTarget.log = EventTarget.log || [];
            EventTarget.log.push("day? hour? minute? "+type);
            oldEventHandler(event);
        
        oldListener.call(this, type, listener, useCapture, wantsUntrusted)
    

然后在控制台输入EventTarget.log

【参考方案4】：

要记录点击事件（用确切的事件目标替换窗口）：

window.addEventListener("click", () => 
    console.log("Element clicked?");
  );

要记录输入键：

window.addEventListener('keypress', e => 
    let key = e.which || e.keyCode;
    if (key === 13)  // 13 is enter. you may use other numbers for other keys
     console.log('Enter pressed');
   
);

要记录所有事件，请使用数组：

['click','mouseover', 'keypress'].forEach(ev => 
    window.addEventListener(ev, () => 
        console.log('event:', ev)
    )
)

可用事件列表：

https://developer.mozilla.org/en-US/docs/Web/Events

可以在浏览器控制台中查看日志（F12）

【讨论】：

不幸的是，有些事件我不知道，所以我不能硬编码事件：/

这样就不要使用条件（所有键都将被记录）并离开窗口对象。像 window.addEventListener('keypress', e => console.log('Enter press'); );

我的回复扩展了一点

【参考方案5】：

我喜欢有用的是 Firefox 开发工具。检查元素时，您有一个标签“事件”。通过单击标签，您可以看到附加到元素的事件。

【讨论】：

这显示了哪些事件侦听器附加到特定元素，但这并不能告诉您实际调用了哪些事件侦听器。

【参考方案6】：

使用console.log("Your text");

您将在浏览器的console 部分按F12 看到此输出。