如何在Chrome Dev Tools中查找事件偵聽器？

Question

我知道懸停在一個元素上導致另一個元素獲得一個添加到它的新類。如何查看Chrome上的eventListener的內容和位置？ Chrome中的Event Listeners標籤只列出文檔中的某些偵聽器，而不是任何特定的元素。

Answer 1

要查看事件偵聽您選擇了一個單一的元素，確保取消選中了「祖先」框的事件監聽器選項卡。如果選中，您將看到該元素的祖先的所有事件偵聽器 - 這可能是您現在看到的。

懸停並沒有真正另一個類添加到一個元素，它觸發了它可以用CSS僞類選擇有針對性的元素的懸停狀態。這不是一個事件監聽器，但是可以添加事件監聽器來檢測元素上的鼠標指針（請參閱答案的結尾）。這裏是針對與任何段落標籤的懸停狀態的一個示例：hover僞類選擇：

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

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

在鉻DevTools，可以強制元件上的懸停狀態，以查看其懸停狀態行爲。爲此，請單擊樣式窗格右上角的：hov按鈕，然後選中：懸停框。如果該元素有任何僞類：懸停式樣規則，則它們現在將顯示在樣式窗格中，並且該元素將在視口中相應地更改。

有事件偵聽器，如「鼠標懸停」和「鼠標移開」，它們一起使用時，將仿真懸停狀態行爲。但是，請注意，這些與懸停狀態無關 - 因此在DevTools中強制懸停狀態不會導致這些事件偵聽器觸發。如果這些事件偵聽器出現在您正在檢查的元素上，它們將顯示在事件偵聽器選項卡中 - 只要記住要在檢查具有大量事件偵聽器的頁面時取消選中「祖先」框。

Answer 2

如果連接到元素的事件監聽器，它會在事件監聽器選項卡中顯示（見截圖）。 只是一個元素的懸停可能不會顯示爲一個事件，因爲它是一個CSS轉換。

嘗試添加事件監聽到一個元素：

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

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鏈接，您可以檢查處理程序的定義。