如何在Chrome中监控焦点事件？

Question

我正在尝试跟踪哪个元素在Web应用中获得焦点。我遇到了monitorEvents API，但我无法将其用于control或focus个事件。 body上的其他活动按预期工作，但control事件没有。有什么建议吗？

Answer 1

我今天试图监视焦点和模糊整个文档上的事件。 使用monitorEvents(document.body, 'control')时，我只会在完全离开标签页并重新调整焦点时看到触发的事件。我相信正在发生的事情是，一旦您专注于身体，当您专注于子元素时，它就不会改变，因为侦听器处于较高水平，并且事件会一直扩散到身体，而焦点不会改变。 / p>

我尝试监视一些特定子元素上的事件，并发现这些事件触发了我的预期。因此，我决定将事件侦听器添加到文档中的每个元素，并且效果很好。这是一线的。

document.querySelectorAll("*").forEach((el)=> monitorEvents(el, 'control'))

Answer 2

I'm not sure how exactly you want to "monitor" control events, but you can set event listener breakpoints on the entire category, or individual events like focus. Whenever a focus listener runs for any node on the page, DevTools pauses on the first line of the listener.