css - 如何在 Chrome 开发工具中找到事件监听器？

Question

我知道将鼠标悬停在一个元素上会导致另一个元素添加一个新类。如何检查此 eventListener 在 Chrome 上的内容和位置？ Chrome 中的 Event Listeners 选项卡仅列出文档中的一些监听器，而不是任何特定元素。

Answer 1

要查看所选单个元素的事件监听器，请确保取消选中事件监听器选项卡中的“祖先”框。如果选中，您将看到该元素的祖先的所有事件监听器 - 这可能就是您现在看到的。

悬停并没有真正向元素添加另一个类，它会触发可以使用 CSS 伪类选择器定位的元素的悬停状态。这不是事件监听器，但可以添加事件监听器来检测元素上的鼠标指针(请参阅答案结尾)。下面是一个使用 :hover 伪类选择器定位任何段落标签的悬停状态的示例:

 p:hover {
      background: blue;
      color: white;
    }

<p>Hover me</p>
<p>Or hover me</p>

在 Chrome DevTools 中，您可以强制元素处于悬停状态以查看其悬停状态行为。为此，请单击样式 Pane 右上角的 :hov 按钮，然后选中 :hover 框。如果该元素有任何伪类 :hover 样式规则，它们现在将显示在样式 Pane 中，并且该元素将在视口(viewport)中相应地更改。

有事件监听器，如“mouseover”和“mouseout”，当它们一起使用时，将模拟悬停状态行为。但是请注意，这些事件独立于悬停状态 - 因此在 DevTools 中强制悬停状态不会导致这些事件监听器触发。如果这些事件监听器出现在您正在检查的元素上，它们将显示在事件监听器选项卡中 - 如果您正在检查具有大量事件监听器的页面，请记住取消选中“祖先”框。