How to list event listeners of the html element in runtime without the dev tools?

Question

There is this answer: can I programmatically examine and modify Javascript event handlers on html elements? but it doesn't provide the runtime solution

Answer 1

There isn't any direct API for this, but it can be accessed in a kind of intrusive way.

By overriding HTMLElement.prototype.addEventListener we can catch added events and store them in an array for example.

const listeners = []
const originalAddEventListener = HTMLElement.prototype.addEventListener
HTMLElement.prototype.addEventListener = function(type, listener, options) {
    listeners.push({
    element: this,
    type,
    listener,
    options
  })
  // call the original listener with current this and provided arguments
  return originalAddEventListener.call(this, type, listener, options)
}

Full snippet with example:

const listeners = []
const originalAddEventListener = HTMLElement.prototype.addEventListener
HTMLElement.prototype.addEventListener = function(type, listener, options) {
  listeners.push({
    element: this,
    type,
    listener,
    options
  })
  return originalAddEventListener.call(this, type, listener, options)
}

document.querySelector('p').addEventListener('click', () => {
  console.log('clicked')
}, false)

document.querySelector('button').addEventListener('click', () => console.log(listeners))

p {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

<button>list listeners</button>
<p>click me</p>