Chrome Dev Toolsでイベントリスナーを見つけるにはどうすればよいですか？

Question

私は要素上でホバリングすると、別の要素に新しいクラスが追加されることが分かりました。このイベントリスナーが何で、どこにあるのかをChromeで確認するにはどうすればよいですか？ ChromeのEvent Listenersタブには、特定の要素ではなく、ドキュメント上のリスナーが一覧表示されます。

Answer 1

は、あなたが選択した単一の要素のイベントリスナーを表示するには、イベントリスナー]タブで「先祖」ボックスのチェックを外していることを確認します。チェックすると、その要素の祖先のすべてのイベントリスナーが表示されます。これは、現在表示されている可能性があります。

ホバリングは実際に要素に別のクラスを追加するわけではありませんが、CSS擬似クラスセレクタを使用してターゲティングできる要素のホバー状態をトリガします。これはイベントリスナーではありませんが、要素上にマウスポインタを検出するために追加できるイベントリスナーがあります（回答の終わりを参照）。ここで有する任意の段落タグのホバー状態を標的の例は、次のとおり

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

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

Chromeのデベロッパーツールで

は、表示する要素上にホバー状態を強制することができる：擬似クラスセレクタを置いそのホバー状態の振る舞い。これを行うには、スタイルペインの右上にある：hovボタンをクリックし、：hoverボックスをチェックします。その要素の擬似クラス：ホバースタイリングルールがある場合、それらはスタイルペインに表示され、ビューポート内で要素がそれに応じて変更されます。

'mouseover'や 'mouseout'などのイベントリスナーがあり、一緒に使用するとホバー状態の動作をエミュレートします。ただし、これらはホバー状態とは独立しているため、DevToolsでホバー状態を強制してもこれらのイベントリスナーはトリガーされません。これらのイベントリスナーが検査対象の要素に存在する場合は、イベントリスナータブに表示されます。多数のイベントリスナーがあるページを検査している場合は、「Ancestors」チェックボックスをオフにしてください。

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>

その場合、あなたはデベロッパーツールのDOMツリーに上にマウスを移動要素を選択：

をそしてmouseoverとmouseoutイベントをチェックイベントリスナー tab：

js:23とjs:19のリンクをクリックすると、ハンドラの定義を検査することができます。