How to find an event listener in Chrome Dev Tools?

问题

I know that hovering over an element causes another element to get a new class added to it. How do I check what and where this eventListener is on Chrome? The Event Listeners tab in Chrome just list some listeners on the document instead of any specific element.

回答1:

To view event listeners for a single element you have selected, make sure you uncheck the 'Ancestors' box in the event listeners tab. If checked, you will see all event listeners for the ancestors of that element - which may be what you are seeing now.

Hovering doesn't really add another class to an element, it triggers a hover state for the element which can be targeted with a CSS pseudo-class selector. This is not an event listener but there are event listeners that can be added to detect the mouse pointer over the element (see end of answer). Here is an example of targeting the hover state of any paragraph tag with the :hover pseudo-class selector:

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

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

In Chrome DevTools, you can force a hover state on the element to view its hover state behavior. To do this click the :hov button at the top right of the styles pane, and then check the :hover box. If there are any pseudo-class :hover styling rules for that element, they will now be displayed in the styles pane and the element will change accordingly in the viewport.

There are event listeners such as 'mouseover' and 'mouseout' which, when used together, will emulate the hover state behavior. Note, however, that these are independent of the hover state - so forcing a hover state in DevTools will not cause these event listeners to trigger. If these event listeners are present on the element you are inspecting, they will show up in the event listeners tab - just remember to uncheck the 'Ancestors' box if you are inspecting a page with a lot of event listeners.

回答2:

If you have an event listener attached to the element, it will be displayed in the Event Listeners tab (see screenshot). Just a hover of an element may not appear as an event, as it's a css transition.

Try adding an event listener to an element:

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

回答3:

So, if I understand correctly: given elements A and B, when you hover over B, a class gets added to A. Then the class gets removed when you hover away.

Since the class gets applied to a different element, it sounds like that is being implemented with mouseover and mouseout events, not the CSS :hover pseudo-class.

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>

In which case, select the element that you hover over in the DOM Tree of DevTools:

And then check the mouseover and mouseout events in the Event Listeners tab:

Clicking the js:23 and js:19 links lets you inspect the handler definitions.

来源：https://stackoverflow.com/questions/45363982/how-to-find-an-event-listener-in-chrome-dev-tools

标签

css

debugging

events

google-chrome-devtools

event-listener