View All Event Listeners

Ever had some sort of conflict on an event listener? Or just want to see what else is being executed on the same action on page. Depending on your browser, this may or may not be a built in functionality.

Built-in to Browser

In Google Chrome, right click on the page, go to Inspect Element. From there, make sure you’re on the Elements tab and click a block of HTML. On the right sidebar you’ll see a tabbed section where you can click Event Listeners and see the actions that the document is listening for. You can drill down further on each of those actions to see where the initial declaration is occuring.
In Internet Explorer, I believe they have similar functionality built-in. In FireFox, I believe it requires a FireBug add-on to see that functionality in browser.

getEventListeners

This is a method that’s baked directly into Chrome and Firebug for Firefox. Syntax: getEventListeners(object). So in conjunction with jQuery, a simple example would be:

getEventListeners($('#container'));

Just go directly to the developer console and type that command for whatever element you’d like to see the listeners for.
getEventListeners Chrome
getEventListeners Firebug

jQuery

There is no fully supported way to get this information in jQuery any more. You can access a private method in jquery via:

$._data($('[selector]')[0],'events');

Replace [selector] with your appropriate element reference. This is not publicly supported, there is no documentation, and it could stop functioning with any new release of jQuery, so do not rely on it. If you’re going to use it, use it for debugging only.

Bookmarklet

If none of the above suit you, there’s a pretty cool bookmarklet that will let you see on page where the listeners are located. If you go here, they provide the bookmarklet to drag to your browser’s bar. This is honestly the way that I use most often as I can see exactly where the listener is located on page.