We Keep Coding

Is it possible to find all JavaScript event listeners of a element using the browser "inspect element"? [duplicate]

I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.
How do I do that using Chrome Web Developer?

You can use monitorEvents function.
Just inspect your element (right mouse click → Inspect on visible element or go to Elements tab in Chrome Developer Tools and select wanted element) then go to Console tab and write:
monitorEvents($0)
Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
To stop getting this data just write this to console:
unmonitorEvents($0)
$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementById or querySelector).
You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:
monitorEvents(document.body, 'mouse')
List of this available types is the following as of 2023-01-30:
mouse
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key
"keydown", "keyup", "keypress", "textInput"
touch
"touchstart", "touchmove", "touchend", "touchcancel"
control
"resize", "scroll", "zoom", "focus", "blur", "select", "change",
"submit", "reset"
Taken from here.
I made a small gif that illustrates how this feature works:

Hit F12 to open Dev Tools
Click the Sources tab
On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
Click on the events you want to listen for.
Interact with the target element, if they fire you will get a break point in the debugger
Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

Visual Event is a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.

For jQuery (at least version 1.11.2) the following procedure worked for me.
Right click on the element and open 'Chrome Developer Tools'
Type $._data(($0), 'events'); in the 'Console'
Expand the attached objects and double click the handler: value.
This shows the source code of the attached function, search for part of that using the 'Search' tab.
And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)

This won't show custom events like those your script might create if it's a jquery plugin. for example :
jQuery(function($){
var ThingName="Something";
$("body a").live('click', function(Event){
var $this = $(Event.target);
$this.trigger(ThingName + ":custom-event-one");
});
$.on(ThingName + ":custom-event-one", function(Event){
console.log(ThingName, "Fired Custom Event: 1", Event);
})
});
The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"

To list all event handlers on the window object in Chrome, you can type window.getEventListeners(window) or for a specific element window.getEventListeners(document.body)

Chrome Dev Tools : view all event listeners used in the page

Is there a feature in chrome dev tools(or any extension) by which I can view all the event listeners that are used on a certain page/app.
Edit:
Its certainly not a duplicate of this question : How do I view events fired on an element in Chrome DevTools?
The above question explains how to look for a particular event that gets fired when we interact with our app ( I am aware of how to do that!).
What I am looking for is the List of all the events that we are listening to in the app and which DOM elements they are attached to.

The Chrome Devtool can't do this for you. But you can inspect those in your console with the API chrome gives: getEventListeners
Just put this code in your dev-tool's console, you can get all the binding click events number in your page:
Array.from(document.querySelectorAll('*'))
.reduce(function(pre, dom){
var clks = getEventListeners(dom).click;
pre += clks ? clks.length || 0 : 0;
return pre
}, 0)
The result is like this:
3249
That was a lot of click binding there. Definitely not a good example of project for performance.
If you want see what events have been bound in all your elements in your page and how many of the listeners of each of the events, just put these codes in your dev-tool's console:
Array.from(document.querySelectorAll('*'))
.reduce(function(pre, dom){
var evtObj = getEventListeners(dom)
Object.keys(evtObj).forEach(function (evt) {
if (typeof pre[evt] === 'undefined') {
pre[evt] = 0
}
pre[evt] += evtObj[evt].length
})
return pre
}, {})
The result is like this:
{
touchstart: 6,
error: 2,
click: 3249,
longpress: 2997,
tap: 2997,
touchmove: 4,
touchend: 4,
touchcancel: 4,
load: 1
}
And so many other info you can get from this API. Just improvise.

Answer in 2021: You can now do this with Chrome Dev Tools! :)
Right click on element in page and select "Inspect to open dev tools
Alternatively
Open Developer Tools (F12)
Select "Elements" Tab (first one by default)
Select an Element in the HTML page structure
In the right box go to "Event Listeners" (by default 4th next to "Layout")
Check "Ancestors" checkbox and "All" in dropdown to see all the Event Listeners. Optionally select "Framework Listeners".

Chrome Dev-Tools don't properly show jQuery-added event-listeners.
This library seems to cover this: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/
Finding event handlers registered using jQuery can be tricky. findHandlersJS makes finding them easy, all you need is the event type and a jQuery selector for the elements where the events might originate.

Finding all js events associated with a HTML element using Chrome

Is there a easy way to find all js events that are associated with a specific HTML element using Chrome?
Example:
HTML element
Cancel
Script:
<script type="text/javascript">
$(function () {
$(".cancel_link").click(function () {
//do something
});
$(".refresh_page").click(function () {
//do something
});
});
</script>

Find the html element in the Elements panel of the dev tools. Then click the Event Listeners tab in the right panel. In the top right hand corner of that Event Listeners panel there's a filter icon. When you click on it you can choose "All Nodes" (default) or "Selected Node Only".

Press F12 to open Developer Tools
Click the Elements tab
Select the element you with to analyze
On the right hand side click the Event Listeners tab
From that tab you can view all of the handlers bound to the element for each event.

Since you seem to use jquery, here is a previously posted solution:
// Bind up a couple of event handlers
​$("#foo").on({
click: function(){ alert("Hello") },
mouseout: function(){ alert("World") }
});​​​
// Lookup events for this particular Element
​$._data( $("#foo")[0], "events" );
you can find out more here: Can I find events bound on an element with jQuery?

How to use getEventListeners in Chrome Dev Tool?

I tried to trace back which function hooked into a click event of .someclass. I open Chrome Dev Tool and type this
getEventListeners(document.querySelector('.someclass'));
The result is this
Object {}
I cannot click and open it to find out the name of the object or the source code that handle click event.
Is there a way to find out?
UPDATE 1:
Followed Krasimir's advise below. There could be only two events: mousemove or mouseover. So how do I find out the exact function handling that event for canvas.overlay? There are just too many to drill down into.

Open the DevTools
Open the Elements tab and locate your element (.someclass)
There are four tabs per element - Styles, Properties, DOM Breakpoints and Event Listeners
Select Event Listeners

You are getting an empty object when calling
getEventListeners(document.querySelector('.someclass'));
probably because the listener isn't hooked up to .someclass element itself (direct event), but to one of it's ancestors (delegated event). There is a good explanation of this here.
You can list both delegated and direct events by calling getEventListeners for specified node and all it's ancestors. This function should do the trick:
getAllEventListeners = function(el) {
var allListeners = {}, listeners;
while(el) {
listeners = getEventListeners(el);
for(event in listeners) {
allListeners[event] = allListeners[event] || [];
allListeners[event].push({listener: listeners[event], element: el});
}
el = el.parentNode;
}
return allListeners;
}
However, this will output exactly the same thing as the "Event Listeners" tab (with "Filter" option set to "All nodes") that Krasimir mentioned in his answer.

I guess you are using jQuery to bind the events to that element.
That's why you can't see the actual handler code in the drill down menu.
Without wrapped by jQuery, the actual code should be displayed in "listenerBody" like this:

See all dom events for an element

I have a jQuery UI datepicker that, when you click on a date, clears my URL hash to #, and doesn't change the date in the textbox.
I assume there's some other JavaScript utility somewhere that has some sort of delegated event that's also being called, throwing an error, and killing the jquery handler.
How can I step through, and or see all delegated events match this dom element.

Chrome's dev tools can help with this:
Point Chrome at the page
Right-click the date in the jQuery UI datepicker and choose "inspect element".
On the far right-hand side, there's an accordian with various things. Near the bottom is "Event Listeners". (Current versions of Chrome's dev tools are very smart about this, including querying jQuery's handler chain.)
Expand the "Event Listeners" tree item and you'll see a list of hooked events related to that element, even if the handler isn't set specifically on that element. (For instance, if you did this with the upvote button on the question, you'd see that click is hooked both for a.vote-up-off and document.) So you can kick around those to see what direct and delegated handlers relate to that event for that element.
Other than that, you could use the un-minified version of jQuery and walk through the event dispatch when you click the date in the datepicker.
And of course, Gabe's shown how you can get the jQuery-specific handlers via the undocumented jQuery events data. (That won't show you delegated handlers (unless you walk the ancestor tree), and won't show you non-jQuery handlers that might be attached, but it's still pretty useful stuff.)

With jQuery you can see all the elements events by accessing the events key of the data.
jsFiddle
Example:
HTML
<input type="text" id="myelement" />​
JS
$(function() {
var myelement = $('#myelement');
myelement.click(function() {
console.log('anonymous event');
});
myelement.click(anotherEvent);
myelement.change(anotherEvent);
var events = myelement.data('events');
console.log('Number of click events:' + events.click.length);
console.log('Number of change events:' + events.change.length);
});
function anotherEvent(){
console.log('another event');
}