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

【问题标题】：How to find an event listener in Chrome Dev Tools?如何在 Chrome 开发工具中找到事件监听器？
【发布时间】：2018-01-03 23:05:16
【问题描述】：

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

【问题讨论】：

标签： css debugging events google-chrome-devtools event-listener

【解决方案1】：

如果您在元素上附加了事件侦听器，它将显示在“事件侦听器”选项卡中（参见屏幕截图）。只是一个元素的悬停可能不会显示为一个事件，因为它是一个 css 转换。

尝试为元素添加事件监听器：

document.addEventListener('DOMContentLoaded',function(){
var el = document.getElementById('someId');
el.addEventListener("click", hoverMe, false);
function hoverMe() {
    console.log('hovering');
}
});

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

所以，如果我理解正确：给定元素 A 和 B，当你将鼠标悬停在 B 上时，一个类会添加到 A。然后，当你将鼠标悬停离开时，该类会被删除。

由于该类被应用到不同的元素，听起来好像是通过 mouseover 和 mouseout 事件实现的，而不是 CSS :hover 伪类。

var a = document.getElementById('a'),
    b = document.getElementById('b');
    
b.addEventListener('mouseover', function () {
  a.classList.add('hover');
});

b.addEventListener('mouseout', function () {
  a.classList.remove('hover');
});

.hover {
  background-color: red;
}

<p id="a">element that the class get's added to</p>
<p id="b">element that you hover over</p>

在这种情况下，请选择您在 DevTools 的 DOM 树 中悬停的元素：

然后检查 Event Listeners 选项卡中的 mouseover 和 mouseout 事件：

单击js:23 和js:19 链接可让您检查处理程序定义。

【讨论】：