如何在Chrome Dev Tools中查找事件监听器？

Question

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

- mangocaptain1

Answer 1

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

悬停并不会真正为元素添加另一个类，它会触发元素的悬停状态，可以使用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中强制悬停状态不会导致这些事件监听器触发。如果这些事件监听器存在于您正在检查的元素上，则它们将显示在事件监听器选项卡中 - 只需记得取消选中“祖先”框，如果您正在检查一个具有许多事件监听器的页面。

- rmc868

Answer 2

如果您将事件监听器附加到元素，则会在“事件监听器”选项卡中显示它（请参见屏幕截图）。 仅悬停在元素上可能不会显示为事件，因为它是CSS过渡。

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

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

- Andrew

Answer 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 Tree中悬停的元素：

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

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

- Kayce Basques