JavaScript事件日志

Question

有没有办法查看JS正在执行哪些事件。

例如，假设我有一个正在触发的单击事件，然后keypress...Now我想要这些触发事件的日志。

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

编辑:我想我需要添加一个细节。我想记录所有事件。如果有一些我不知道的自定义事件，我想知道它的名称。因此，我不能只监视我知道的某些事件，也不能监视那些我不知道的事件。

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

Answer 1

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

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

monitorEvents(document);

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

monitorEvents(document, 'click');

当然，您可以自由地将文档替换为您想要查看的任何对象。

Answer 2

用你想要附加的listners填充Array，然后记录它们的类型；

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

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

Answer 3

要在单击时记录事件(将窗口替换为确切的事件目标)：

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

要记录enter keypress，请执行以下操作：

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)中查看日志