Question

我如何查看Google Chrome控制台中正在触发哪些事件？当我单击按钮时，我想查看哪些事件正在Google Chrome的控制台中触发。我该怎么做？

<input type="submit" value="Submit" id = "button" onclick="clickThisButton()">

<script>
function clickThisButton() {
document.getElementById("button").value = "Submitted";
} //end of function clickThisButton()
</script>

Answer 1

您可以获得一个list of all events，然后将一个侦听器附加到每个侦听器。

如果要确保侦听器运行，请在捕获阶段将其附加到窗口，这样就不会通过stopPropagation将其停止：

const frequentEvents = ['animationstart', 'animationend', 'scroll'];

for (const prop in window) {
  if (/^on/.test(prop)) {
    const eventName = prop.slice(2);
    window.addEventListener(
      eventName,
      () => {
        // these events run frequently, logging them will clog the snippet
        if (!frequentEvents.includes(eventName)) {
          console.log('event:', eventName);
        }
      },
      true // capturing phase
    );
  }
}

如果页面在捕获阶段在window上拥有自己的侦听器，并且在调用stopImmediatePropagation，和之前附加了该侦听器，则该页面可能仍会阻止其运行您的听众在这里。为防止这种情况，请确保您的侦听器首先连接（例如用户脚本中的@run-at document-start，以确保脚本先运行）。

如果您还需要查看页面添加到每个事件的侦听器，则可以猴子修补addEventListener和每个.on-设置器，以便您可以在添加函数之前对其进行检查（尽管这不会检测内联处理程序（如您的代码中一样）

如何查看Google Chrome浏览器控制台中正在触发哪些事件？

1 个答案: