By Navneet

2009-01-15 14:19:44 8 Comments

I have a page where some event listeners are attached to input boxes and select boxes. Is there a way to find out which event listeners are observing a particular DOM node and for what event?

Events are attached using:

  1. Prototype's Event.observe;
  2. DOM's addEventListener;
  3. As element attribute element.onclick.


@Gabriel Petersson 2020-07-22 14:22:29

To get all eventListeners on a page printed alongside their elements

Array.from(document.querySelectorAll("*")).forEach(e => {
    const ev = getEventListeners(e)
    if (Object.keys(ev).length !== 0) console.log(e, ev)

@Andrew Hedges 2010-08-06 17:48:47

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

Update: Visual Event 2 available.

@Robin Maben 2011-09-15 08:47:45

Perfect! Beats Firebug's EventBug plugin.

@Tony R 2012-03-08 21:57:49

This adds a jillion elements to the page, many of which are images. Its usefulness is reduced greatly on a page with many event handlers (mine has 17k and Visual Event took about 3 minutes to load).

@kmote 2013-02-17 19:57:11

I believe the Chrome extension @ssharma mentioned is the one available here

@hiway 2013-11-19 03:50:03

Visial Event does not work if the page refers a third party js library. It raises an error: XMLHttpRequest cannot load Origin is not allowed by Access-Control-Allow-Origin.

@ken 2013-12-11 20:45:51

It's obvious from the source, but the bookmarklet injects a 3rd-party script into your site. This may be fine for most uses, but if you're dealing with PCI, HIPAA, etc. data then you should probably steer clear.

@oriadam 2015-12-31 05:27:04

Chrome and FF internal Developer Tools (F12) has a built-in event viewer! Chrome: on the "Elements" tab, select and element and see to the right there are: Style, Computed, Event Listeners

@doABarrelRoll721 2016-02-20 02:11:47

It seems that Visual Event doesn't support the DOM 2 way of adding EventListeners. This is extremely odd and incomprehensible for me, since it does support half a dozen non-core libraries.

@Michael 2016-05-20 21:40:59

@oriadam Awesome! Any way to determine which one I want to look at more quickly than opening them one by one?

@oriadam 2016-05-21 22:17:35

@Michael Firefox has this small "ev" icon near the elements that has event listeners. I couldn't find a similar icon on Chrome, sorry. doABarrelRoll721 If you find a way to detect them, it's very easy to add an event parser to the Visual Event library. Come on in, the code is great :)

@Legends 2016-11-05 12:47:22

You also have a problem if the script is minified, everything will be on one line. A copy button would be nice. Also the VE popup gets into my way when I hover over elements... But nevertheless a very helpful extension!

@Justin Farrugia 2019-08-02 10:01:20

@TonyR you came looking for an event visualizer and complain because it's taking 3 mins to load on 17k events? I mean I can create an AI VisualEvent which will look at your events and only catch the ones that you would need at that particular time only if you like...

@Elijah Mock 2019-12-07 23:40:38

What is the difference between Visual Event and Visual Event 2?

@Raghav 2013-05-14 13:40:20

Chrome, Firefox, Vivaldi and Safari support getEventListeners(domElement) in their Developer Tools console.

For majority of the debugging purposes, this could be used.

Below is a very good reference to use it:

@Grault 2013-08-19 05:54:46

+1. Browser-specific code isn't a problem for me, because I'm trying to get a page I don't control to work properly.

@gillyspy 2013-12-20 16:25:45

nice, but only works in the command line of the Chrome console :(

@jave.web 2015-03-14 00:23:34

In which chrome versions is this available, because 40 does not seem to have it ...

@Raghav 2015-03-14 04:08:43

@jave.web The current one that I use is 41.0.2272.89. The feature still exists.

@jave.web 2015-03-15 19:53:29

@Raghav ah thanks, the usage is getEventListeners(object) NOT: obj getEventListeners() as I first thought :)

@doABarrelRoll721 2016-02-20 05:06:44

You could've saved me 3 hours if you'd have explained how to get the source code of an eventlistener. That "reference" didn't explain anything. In case anyone else was on a loss here's how: var list = getEventListeners(document.getElementById("YOURIDHERE")); console.log(list["focus"][0]["listener"].toString()). Change "focus" to the event you want to inspect and the number if there are multiple listeners on the same event.

@cacoder 2017-01-31 23:46:01

TIP: getEventListeners($0) will get the event listeners for the element you have focused on in the Chrome dev tools. I use this all the time. Love not having to use querySelector or get__By_ functions

@jeromej 2017-07-02 21:05:03

@CliffordFajardo Sounds like a nice hidden feature there. <3

@Franklin Yu 2018-06-14 23:01:32

As oriadam mentioned in his comment, Chrome and Firefox internal Developer Tools (F12) has a built-in event viewer.

@Aiden Waterman 2019-04-18 14:57:18

changing these functions will allow you to log the listeners added:


read the rest of the listeners with


@akinuri 2018-06-28 09:21:07

I was recently working with events and wanted to view/control all events in a page. Having looked at possible solutions, I've decided to go my own way and create a custom system to monitor events. So, I did three things.

First, I needed a container for all the event listeners in the page: that's theEventListeners object. It has three useful methods: add(), remove(), and get().

Next, I created an EventListener object to hold the necessary information for the event, i.e.: target, type, callback, options, useCapture, wantsUntrusted, and added a method remove() to remove the listener.

Lastly, I extended the native addEventListener() and removeEventListener() methods to make them work with the objects I've created (EventListener and EventListeners).


var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");

// bodyClickEvent.remove();

addEventListener() creates an EventListener object, adds it to EventListeners and returns the EventListener object, so it can be removed later.

EventListeners.get() can be used to view the listeners in the page. It accepts an EventTarget or a string (event type).

// EventListeners.get(document.body);
// EventListeners.get("click");


Let's say we want to know every event listener in this current page. We can do that (assuming you're using a script manager extension, Tampermonkey in this case). Following script does this:

// ==UserScript==
// @name         New Userscript
// @namespace
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include*
// @grant        none
// ==/UserScript==

(function() {
        .then(function (response) {
            return response.text();
        .then(function (text) {
            window.EventListeners = EventListeners;

And when we list all the listeners, it says there are 299 event listeners. There "seems" to be some duplicates, but I don't know if they're really duplicates. Not every event type is duplicated, so all those "duplicates" might be an individual listener.

screenshot of console listing all event listeners in this page

Code can be found at my repository. I didn't want to post it here because it's rather long.

Update: This doesn't seem to work with jQuery. When I examine the EventListener, I see that the callback is

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

I believe this belongs to jQuery, and is not the actual callback. jQuery stores the actual callback in the properties of the EventTarget:

$(document.body).click(function () {
    console.log("jquery click");

enter image description here

To remove an event listener, the actual callback needs to be passed to the removeEventListener() method. So in order to make this work with jQuery, it needs further modification. I might fix that in the future.

@mt025 2019-10-05 21:06:28

Works great! Thanks

@Pranay Soni 2014-03-19 09:30:04

Use getEventListeners in Google Chrome:


@Bryan Grace 2015-11-18 22:43:02

Uncaught ReferenceError: getEventListeners is not defined

@Nickolay 2016-02-13 13:20:40

getEventListeners works only in Chrome's devtools console. And this is a duplicate of this more elaborate answer:

@T.Todua 2017-02-28 15:13:15

There exists nice jQuery Events extension :

enter image description here (topic source)

@n00b 2015-06-27 10:47:52

Fully working solution based on answer by Jan Turon - behaves like getEventListeners() from console:

(There is a little bug with duplicates. It doesn't break much anyway.)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
      this.eventListenerList = {};
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..

  Element.prototype.getEventListeners = function(a){
      this.eventListenerList = {};
      return this.eventListenerList;
    return this.eventListenerList[a];
  Element.prototype.clearEventListeners = function(a){
      this.eventListenerList = {};
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
    var el = this.getEventListeners(a);
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
        this.eventListenerList = {};
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
      delete this.eventListenerList[a];


someElement.getEventListeners([name]) - return list of event listeners, if name is set return array of listeners for that event

someElement.clearEventListeners([name]) - remove all event listeners, if name is set only remove listeners for that event

@David Bradshaw 2015-08-24 19:55:46

This is a nice answer, but I can't get it to work on the body and document elements.

@Dzhakhar Ukhaev 2017-01-21 10:56:20

Really nice solution!

@n00b 2017-01-29 12:11:53

@Peter Mortensen , why did you change Jan's name ? :)

@Stefan Steiger 2018-07-21 15:04:10

@David Bradshaw: because body, document and window have their own prototype and not the Element prototype...

@Stefan Steiger 2018-07-23 00:01:02

@n00b: There's a bug. That's why hmmm. You use the comma-operator in the if statement for listener and useCaption... The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand. So you remove the first eventListener that matches in useCapture, irrespective of the type of the event... That should be && instead of comma.

@simonzack 2015-01-14 15:33:29

The Firefox developer tools now does this. Events are shown by clicking the "ev" button on the right of each element's display, including jQuery and DOM events.

Screenshot of Firefox developer tools' event listener button in the inspector tab

@Eric 2015-02-03 21:07:23

I did look at one of the dom elements on the page that the Visual Event 2 bookmarklet is showing an event wired to, and I did see the little "ev" button to the right, like you show.

@Nick Tsai 2017-08-04 06:31:47

Firefox's event listener could find out jQuery delegated events while Chrome needs plugin to do it.

@Michael Butler 2010-01-07 22:52:00

If you have Firebug, you can use console.dir(object or array) to print a nice tree in the console log of any JavaScript scalar, array, or object.





@Javier Constanzo 2013-08-31 15:31:21

@Jon z 2015-11-06 17:49:11

You could wrap the native DOM methods for managing event listeners by putting this at the top of your <head>:

        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);

H/T @les2

@Maciej Krawczyk 2017-02-03 17:25:55

Please correct me if I'm wrong, but isn't it only for event listeners attached to the window?

@Jon z 2017-02-06 16:47:42

@MaciejKrawczyk yep, and those that bubble

@Jan Turoň 2014-04-03 15:08:07

1: Prototype.observe uses Element.addEventListener (see the source code)

2: You can override Element.addEventListener to remember the added listeners (handy property EventListenerList was removed from DOM3 spec proposal). Run this code before any event is attached:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];

Read all the events by:

var clicks =;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());

And don't forget to override Element.removeEventListener to remove the event from the custom Element.eventListenerList.

3: the Element.onclick property needs special care here:

  alert("I also listen tho this: "+someElement.onclick.toString());

4: don't forget the Element.onclick content attribute: these are two different things:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

So you need to handle it, too:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

The Visual Event bookmarklet (mentioned in the most popular answer) only steals the custom library handler cache:

It turns out that there is no standard method provided by the W3C recommended DOM interface to find out what event listeners are attached to a particular element. While this may appear to be an oversight, there was a proposal to include a property called eventListenerList to the level 3 DOM specification, but was unfortunately been removed in later drafts. As such we are forced to looked at the individual Javascript libraries, which typically maintain a cache of attached events (so they can later be removed and perform other useful abstractions).

As such, in order for Visual Event to show events, it must be able to parse the event information out of a Javascript library.

Element overriding may be questionable (i.e. because there are some DOM specific features like live collections, which can not be coded in JS), but it gives the eventListenerList support natively and it works in Chrome, Firefox and Opera (doesn't work in IE7).

@Joel Barba 2015-05-19 08:33:11

I am trying to do that in jQuery 2.1, and with the "$().click() -> $(element).data("events").click;" method it doesn't work.

I realized that only the $._data() functions works in my case :


		var node = $('body');
        // Bind 3 events to body click { alert('hello');  })
			.click(function(e) { alert('bye');  })

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        

	function fun_1() {
		var txt = 'text del missatge';	 
<script src=""></script>


@Luke 2012-10-22 19:04:27

(Rewriting the answer from this question since it's relevant here.)

When debugging, if you just want to see the events, I recommend either...

  1. Visual Event
  2. The Elements section of Chrome's Developer Tools: select an element and look for "Event Listeners" on the bottom right (similar in Firefox)

If you want to use the events in your code, and you are using jQuery before version 1.8, you can use:


to get the events. As of version 1.8, using .data("events") is discontinued (see this bug ticket). You can use:

$._data(element, "events")

Another example: Write all click events on a certain link to the console:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

(see for a working example)

Unfortunately, using $._data this is not recommended except for debugging since it is an internal jQuery structure, and could change in future releases. Unfortunately I know of no other easy means of accessing the events.

@Marius Gedminas 2013-12-06 11:19:36

$._data(elem, "events") doesn't appear to work with jQuery 1.10, at least for events registered using $(elem).on('event', ...). Does anyone know how to debug those?

@Luke 2013-12-06 20:44:45

I'm not positive, but I think the first param of $._data may need to be an element and not a jQuery object. So I need to fix my example above to be console.log($._data($myLink[0], "events").click);

@Daniel Sokolowski 2013-11-28 16:30:26

Opera 12 (not the latest Chrome Webkit engine based) Dragonfly has had this for a while and is obviously displayed in the DOM structure. In my opinion it is a superior debugger and is the only reason remaining why I still use the Opera 12 based version (there is no v13, v14 version and the v15 Webkit based lacks Dragonfly still)

enter image description here

@Ronald 2013-01-17 17:28:55

Prototype 1.7.1 way

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];

@Ivan Castellanos 2011-06-22 04:32:42

It is possible to list all event listeners in JavaScript: It's not that hard; you just have to hack the prototype's method of the HTML elements (before adding the listeners).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];

HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});

Now every anchor element (a) will have a lastListenerInfo property wich contains all of its listeners. And it even works for removing listeners with anonymous functions.

@huyz 2011-07-25 08:22:36

This method won't work if you're writing a user script or content script. Not only are likely to be sandboxed these days but how can you guarantee the order of execution?

@Tzury Bar Yochay 2012-06-01 05:54:00

this method works with chrome/19 and FF/12. order of execution can be guaranteed if you hook this before other scripts

@Esailija 2012-06-16 06:48:18

Couldn't you just modify Node.prototype instead? That's where HTMLAnchorElement inherits .addEventListener from anyways.'

@RobG 2012-11-13 00:43:09

You're assuming that the user agent implements prototype inheritance for DOM host objects and allows you to modify them. Neither of those are good ideas: don't modify objects you don't own.

@gotofritz 2015-09-15 10:46:37

This is pretty useless - it shows what eventListeners were added, which can be good in some cases, but not what was removed. So if you are trying to debug what was removed and what wasn't, there is simply no way.

@doABarrelRoll721 2016-02-20 04:48:04

@gotofritz is right. This doesn't show you the eventlisteners that you have at the moment. I wonder if the upvoters even read the question.

@Ivan Castellanos 2016-02-20 23:51:04

@doABarrelRoll721 And I wonder if you have common sense. You see, JavaScript executes in the side of the browser, so you can execute it at any moment you need, e.g. with a little help of tamper-monkey you can execute on all websites you open.

@doABarrelRoll721 2016-02-21 01:12:48

@IvanCastellanos What I meant was that your lastListenerInfo array contains only the listeners that were added. OP asked for which event listeners are observing a particular DOM node, which includes the ones that were removed. If you'd have overwritten removeEventListener the same you did with addEventListener your lastListenerInfo array would have exactly what OP asked for (although he was talking about input and select elements, not anchors, but whatever).

@Ishan 2011-01-17 07:39:55

WebKit Inspector in Chrome or Safari browsers now does this. It will display the event listeners for a DOM element when you select it in the Elements pane.

@huyz 2011-07-25 08:21:27

I'm not sure it shows all the event handlers; just the single HTML event handler.

@Nickolay 2011-10-18 22:59:19

I should mention EventBug plugin for Firebug for completeness <>

@siliconrockstar 2013-12-19 17:41:19

This just made my day, some legacy prototype code had multiple functions bound to the same event on the same element and I was dying trying to track them down. Thank you so much Ishan.

@Crescent Fresh 2009-01-15 15:13:51

It depends on how the events are attached. For illustration presume we have the following click handler:

var handler = function() { alert('clicked!') };

We're going to attach it to our element using different methods, some which allow inspection and some that don't.

Method A) single event handler

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Method B) multiple event handlers

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
// cannot inspect element to find handlers

Method C): jQuery

  • 1.3.x

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, value) {
        alert(value) // alerts "function() { alert('clicked!') }"
  • 1.4.x (stores the handler inside an object)

    // inspect
    var clickEvents = $(element).data("events").click;
    jQuery.each(clickEvents, function(key, handlerObj) {
        alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
        // also available: handlerObj.type, handlerObj.namespace

(See and

Method D): Prototype (messy)

$(element).observe('click', handler);
  • 1.5.x

    // inspect
    Event.observers.each(function(item) {
        if(item[0] == element) {
            alert(item[2]) // alerts "function() { alert('clicked!') }"
  • 1.6 to, inclusive (got very difficult here)

    // inspect. "_eventId" is for < while 
    // "_prototypeEventID" was introduced in
    var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
        alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  • 1.6.1 (little better)

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

@Keith Bentrup 2009-09-14 18:35:07

Thx for updating this. It's unfortunate that you have to iterate thru each type of handler.

@Nickolay 2011-10-18 23:00:36

On "Method B" (addEventListener) here's an answer regarding the status of the enumeration facilities for handlers registered with pure DOM Events API:…

@Crescent Fresh 2012-04-25 01:23:43

@John: thanks for the comment. You have an example of "real JavaScript" to fetch listeners previously added via addEventListener?

@John 2012-04-25 17:23:17

If someone is sloppy they can create a monitoring service. If they have good practices they simply won't need to create one. Same listeners overwrite the old versions of themselves.

@tomdemuyt 2012-05-30 18:26:47

@Jan, this does not seem to work for jQuery 1.7.2, is there a different approach for that version ?

@Aaron 2013-01-12 18:24:40

What about event listeners that aren't on the actual element like the following: $(parentElement).on(event, 'myElement', handler);?

@Rolf 2014-01-12 09:06:17

Why are there so many ways of attaching events and so many places they can be saved? It's not really helping us programmers, is it?

@Matt Browne 2014-02-13 16:17:30

@tomdemuyt In jQuery, events are now stored in an internal data array rather than being accessible via .data('events') like they were before. To access the internal event data, use $._data(elem, 'events'). Note that this function is marked "for internal use only" in the jQuery source, so no promises that it will always work in the future, but I believe it's worked ever since jQuery 1.7 and still works.

Related Questions

Sponsored Content

43 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

31 Answered Questions

[SOLVED] Remove all child elements of a DOM node in JavaScript

  • 2010-10-17 20:51:00
  • Polaris878
  • 897868 View
  • 892 Score
  • 31 Answer
  • Tags:   javascript dom

23 Answered Questions

[SOLVED] Event binding on dynamically created elements?

16 Answered Questions

[SOLVED] How do I find out which DOM element has the focus?

  • 2009-01-30 20:21:31
  • Tony Peterson
  • 670782 View
  • 1320 Score
  • 16 Answer
  • Tags:   javascript dom

5 Answered Questions

[SOLVED] How do I view events fired on an element in Chrome DevTools?

17 Answered Questions

[SOLVED] How to decide when to use Node.js?

15 Answered Questions

Sponsored Content