How To Find Events Bound To An Element With jQuery
28th May 2013
In this tutorial we are going to investigate ways you can tell what events a certain element has bound to it. This is really useful when you need to debug the on method to see how it is working.
There are a number of ways to bind events to an element, there is bind(), live() anddelegate().
- Bind - Used to attach events to current elements on the page. If new elements are added with the same selector the event will not be added to the element.
- Live - This is used to attach an events to all elements on the page and future elements with the same selector.
- Delegate - This is used to attach events to all elements on the page and future elements based on a specific root element.
As of jQuery 1.7 the on method will give you all the functionality that you need to bound events to elements. It will allow you to add an event to all elements on the page and all future elements.
$('.element').on('click', function(){
// stuff
});
$('.element').on('hover', function(){
// stuff
});
$('.element').on('mouseenter', function(){
// stuff
});
$('form').on('submit', function(){
// stuff
});When you are assigning events to future elements you might want to find out what events are currently assigned to these elements.
Using developer tools in your browser you can see what events are currently bound to the element by using these 2 methods. First you can display the events by using the console, the second method is to view the events in the event listener window in the developer tools.
Display Events In Console
In your browser if you press F12 a new window called developer tools will open, this allows you to view the entire HTML DOM in more detail, this also has a console feature which will allow you to type in any Javascript to run at this current time on the page.
You can use the console to display a list of events currently assigned to an element by using the following code.
$._data( $('.element')[0], 'events' );This will display all the events that are currently assigned to the element.
Event Listener Window
The other option to use to view what events are currently assigned to an element is to use the event listener window in your browser's developer tools. All you have to do is press F12 to open the developer tools, select the element in the HTML DOM that you want to investigate, on the right side of the window you will see an option called Event Listeners.
When you expand this menu you will see all the current events assigned to the element including all click events bound from jQuery.
