Get Event Listeners Attached to Node Using Addeventlistener

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.

Get event listeners attached to node using addEventListener

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

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?

How to list all registered events of a DOM node using JavaScript?

I know this is an old question, but just in case, for chrome you can use getEventListeners

getEventListeners function

as mentioned here:

https://stackoverflow.com/a/17466308/538752

How can I add event listener in node js

The title is incorrect, as some users pointed out and you should throw some code snippets to showcase what you've been doing and where exactly your problem is.
From the form of the question and details, I would suggest you do some research into the differences between frontend and backend and the solution will be clearer. But regarding your specific issue, assuming you're using Node, probably with Express and some templating engine;

• You'll want to attach a onClick listener to your button in your ejs/pug/haml file
• Get the data from your form in some way, either by getElementById or FormData
• Do a fetch with POST on the endpoint hitting your route -> controller with the data from your form or buttons
• res.json(...) or, more likely res.render(...) your page with the related data result

Inspect attached event handlers for any DOM element

Event handlers attached using traditional element.onclick= handler or HTML <element onclick="handler"> can be retrieved trivially from the element.onclick property from script or in-debugger.

Event handlers attached using DOM Level 2 Events addEventListener methods and IE's attachEvent cannot currently be retrieved from script at all. DOM Level 3 once proposed element.eventListenerList to get all listeners, but it is unclear whether this will make it to the final specification. There is no implementation in any browser today.

A debugging tool as browser extension could get access to these kinds of listeners, but I'm not aware of any that actually do.

Some JS frameworks leave enough of a record of event binding to work out what they've been up to. Visual Event takes this approach to discover listeners registered through a few popular frameworks.

custom event listener on a dom node

You could register custom events handler using addEventListener method. BTW this approach is recommended for native events as well. Inline handlers are bad because they are mixing view (HTML) with logic (js).

var elem = document.getElementById("bar");
elem.addEventListener('foo', function() {  console.log('foo event on bar')})
document.getElementById('foo').addEventListener('click', function() {  var event = new CustomEvent('foo');  elem.dispatchEvent(event);})

<button id="bar">Bar</button><button id="foo">Trigger Foo</button>

How to copy a DOM node with event listeners?

cloneNode() does not copy event listeners. In fact, there's no way of getting hold of event listeners via the DOM once they've been attached, so your options are:

• Add all the event listeners manually to your cloned node
• Refactor your code to use event delegation so that all event handlers are attached to a node that contains both the original and the clone
• Use a wrapper function around Node.addEventListener() to keep track of listeners added to each node. This is how jQuery's clone() method is able to copy a node with its event listeners, for example.

---

Related Topics