How to Find Event Listeners on a Dom Node in JavaScript or in Debugging

How to find event listeners on a DOM node in JavaScript or in debugging?

If you just need to inspect what's happening on a page, you might try the Visual Event bookmarklet.

Update: Visual Event 2 available.

How to find event listeners on a DOM node using JavaScript

Of course browsers internally have a list of event listeners, but it is not exposed to page-level JavaScript. For example, Firebug (or Eventbug) probably use nsIEventListenerInfo.

That being said, this old answer still holds:

How to find event listeners on a DOM node?

Get event listeners attached to node using addEventListener

Chrome DevTools, Safari Inspector and Firebug support getEventListeners(node).

how to catch any specific node event by event Listener JavaScript

When a DOM event handler is triggered, it is automatically passed a reference to the event object for that event. Also, within the handler, the this keyword is bound to the DOM object that is handling the event. If the DOM object that is handling the event is not the same one that actually triggered the event in the first place (because you are handling the event at an element higher up in the DOM structure due to bubbling), you can still get a reference to the element that triggered the event with event.target. Knowing these things allows you to access surrounding elements without knowing their specific id (or even having ids in the first place.

The following example leverages "event bubbling" where we only set up one handler at a DOM element that is an ancestor of all the elements that might trigger the event. When any of these elements triggers the event, it will bubble up to the ancestor and be handled there. Then, within that handler, we access the original element that triggered the event with event.target and work from there.

// set up a handler on an ancestor of all the 
// elements that could trigger the event
document.querySelector(".wrapper").addEventListener("click", function(event){
  console.clear();
  console.log("The object handling the event is: " + this.nodeName + "#" + this.id);

  // Get a reference to the actual element that triggered the event
  const target = event.target;
  console.log("You clicked the " + target.textContent + " button");
  
  // We can now access other elements, relative to the target
  const prevSib = target.previousElementSibling;
  console.log("The textbox associated with the button you clicked was: " + prevSib.id);
  prevSib.value = "Winner!";
});

<div class="wrapper" id="wrapper">
  <div><input id="One"><button>Edit 1</button></div>
  <div><input id="Two"><button>Edit 2</button></div>
  <div><input id="Three"><button>Edit 3</button></div>  
  <div><input id="Four"><button>Edit 4</button></div>
  <div><input id="Five"><button>Edit 5</button></div>  
</div>

Update: How to find event listeners on a DOM node in prototype?

I've update the answer you linked to with more comprehensive Prototype coverage accounting for changes in versions 1.6.0 to 1.6.1.

It got very messy in between there, but 1.6.1 is somewhat clean:

var handler = function() { alert('clicked!') };
$(element).observe('click', handler);

// inspect
var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
clickEvents.each(function(wrapper){
    alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
})

What event handlers are attached to a DOM node - how to find?

Chrome (and I suspect Safari) can show attached event listeners when you select an element in the DOM and then scroll down the right sidebar to the Event Listeners section. There, you can see which functions are attached.

I don't have a copy of Firebug at the moment, but I suspect the DOM tab to show similar information in Firefox as well.

---

Related Topics