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

Question

我知道将鼠标悬停在某个元素上会导致另一个元素添加一个新类。如何查看此事件监视器在Chrome上的位置和位置？ Chrome中的Event Listeners标签只列出了文档中的一些侦听器，而不是任何特定元素。

Answer 1

如果您有一个附加到该元素的事件监听器，它将显示在Event Listeners选项卡中（参见屏幕截图）。 只是悬停一个元素可能不会显示为事件，因为它是一个css过渡。

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

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

Answer 2

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

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

定位任何段落标记的悬停状态的示例

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

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

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

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

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

然后查看事件监听器标签中的mouseover和mouseout个事件：

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