Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get all event listeners on the page in Google Chrome
var items = Array.prototype.slice.call(
document.querySelectorAll('*')
).map(function(element) {
var listeners = getEventListeners(element);
return {
element: element,
listeners: Object.keys(listeners).map(function(k) {
return { event: k, listeners: listeners[k] };
})
};
}).filter(function(item) {
return item.listeners.length;
});
// See below for things you can do with the items
// Things you can do with the items
// 1. log them to the console
console.log(items);
// 2. Put a red border around the elements
items.forEach(function(item) {
item.element.style.outline = '1px solid red';
})
// 3. generate a summary
var summary = .map(function(item) {
var el = item.element,
id = el.id,
className = el.className;
if (className instanceof SVGAnimatedString) {
className = className.baseVal;
}
var str = el.tagName.toLowerCase() + (id ? '#' + id : '') + (className ? '.' + className.replace(/\s+/g, '.') : '');
str += ' ' + item.listeners.map(function(l) {
return l.event + ': ' + l.listeners.length;
}).join(' ');
return str;
}).join('\n');
console.log(summary);
@julienetie

This comment has been minimized.

Copy link

julienetie commented Oct 4, 2016

Useful script, quick typo: .map(function(item) Should be items.map(function(item).

@marcobiedermann

This comment has been minimized.

Copy link

marcobiedermann commented Dec 9, 2016

Nice script, you could use the new ES2015 syntax and make use of the Array.from methode to make it a bit cleaner:

const items = Array.From(document.querySelectorAll('*')).map(element => {
  const listeners = getEventListeners(element);

  return {
    element: element,
    listeners: Object.keys(listeners).map(key => {

      return {
        event: key,
        listeners: listeners[key]
      };

    })
  };

}).filter(item => item.listeners.length);
@ilyazub

This comment has been minimized.

Copy link

ilyazub commented Jul 14, 2017

@marcobiedermann it will work if you replace Array.From with Array.from.

@nmaxcom

This comment has been minimized.

Copy link

nmaxcom commented Nov 28, 2017

I'd also suggest, for sanity's sake, to add a little .sort() right before map, like so: listeners: Object.keys(listeners).sort().map(key => {

Haven't tested with that ES6 mod but with OP's worked fine.

@ORESoftware

This comment has been minimized.

Copy link

ORESoftware commented Jan 2, 2018

@danburzo

how to get all events on window itself? Right now I have:

['click', 'keyup', 'dragstart', 'dragend'].forEach(function (name) {
  window.addEventListener(name, function (ev) {
    console.log(name + ' event captured by content script:', ev);
    port.postMessage(name);
  });
});

but it would be nice to access a complete list of events programmatically (not hardcoded)

@ndvbd

This comment has been minimized.

Copy link

ndvbd commented Jun 9, 2018

Very cool!

@xxammuxx

This comment has been minimized.

Copy link

xxammuxx commented Jan 1, 2019

Just to mention, this js script works in the console and not in script tag or script file in an html page.

@samarpanda

This comment has been minimized.

Copy link

samarpanda commented Feb 6, 2019

@xxammuxx - Do you have any example where it doesn't seem to be working? Would be great if you can share a jsfiddle snippet.

@alex2844

This comment has been minimized.

@preflight

This comment has been minimized.

Copy link

preflight commented Oct 16, 2019

https://codepen.io/azaslavsky/pres/sybfE

From the codepen author:

"...all of the major browsers have decided against supporting getEventListeners. Only Chrome supports it from the command line"

@ochen1

This comment has been minimized.

Copy link

ochen1 commented Apr 25, 2020

👍 Thank you! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.