JavaScript: Get all elements which have an event bind to them

Question

Is there a way in JavaScript to get all elements on the page which have an event bind to them. I know you can get all events an a particular event, but is there a way the all elements?

[`getEventListeners(document)`](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3#geteventlistenersobject) might do the trick. this does work in the developer's console but i don't know if this works in an .js file. — Kevin Kloet, Dec 08 '16 at 15:38
Thanks, I know this function but it does only work on a single element. I need all elements on the page. I could loop recursively the dom and call this method on each element. Is there a much simpler solution to it? — marcobiedermann, Dec 08 '16 at 15:40
How have the events been bound? I personally like to use jQuery for all event management because of how easy `.on()` and `.off()` are to use, plus with name spacing it becomes even easier to keep yourself organized and manage the events you care about. — Mike, Dec 08 '16 at 15:42
If you can, calling a custom function could be a solution, you can maintain a list of elements that have events attached to them. I can't see any other simple solution, you will have to navigate through all elements otherwise. — Tiago Engel, Dec 08 '16 at 15:49
if you use the document as parameter it gets all the event listeners inside the document. no need to loop here. as far as using this outside the console, i don't know how how to do this easily without looping over all the elements. — Kevin Kloet, Dec 08 '16 at 15:51
When you're asking a question, please share what you've tried so far, so that you can get the answers you're looking for. It looks like your actual question is, can I do better than "your code here" — 4castle, Dec 08 '16 at 16:07

score 2 · Accepted Answer · answered Dec 09 '16 at 07:01

Thank you all for your help. I found this great snippet which loops over all elements on page and adds each elements which has an event bind to it to an array.

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;
});

Full credit to Dan: https://gist.github.com/danburzo/9254630

score 1 · Answer 2 · edited May 23 '17 at 11:46

As suggested in the comments, you can use getEventListeners(document) on chrome dev tools, but if you want to use this inside your code, a possible solution is using a custon function to register the events and mantaining a list of elements that have events atached.

Code not ready to use, just an example

let elements = [];
function addEventListener(elem, event, cb) {
   elem.addEventListener(event, cb);
   elements.push(elem);
}

You will of course need to remove the element when the event is removed.

If you don't have control over all code that register events (which is quite common) you can monkey path the Node.prototype.addEventListener function. Which is not recomended (you can read more here). But it is a possibility...

JavaScript: Get all elements which have an event bind to them

2 Answers2