To view object registration events using jquery

How to Find Events Bound to a Element with JQuery

28th May 2013

Share your passion with the world. Create a beautiful website today.ads via Carbon

In this tutorial we is going to investigate ways you can tell what events a certain element have bound to it. This is really useful if you are need to debug the "on" method to see how it is working.

There is 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 is added with the same selector the event won't be added to the element.
• Live -This is used to attach a events to all elements on the page and a 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 would give you all the functionality so need to bound events to elements. It'll allow you to add a event to all elements on the page and all of the future elements.

$('. Element ').On(' Click ',function(){Stuff});$('. Element ').On(' Hover ',function(){Stuff});$('. Element ').On(' MouseEnter ',function ({//Stuff}" ;$ (  ' form ' ) .on ( ' Submit ' function{//Stuff}"       

When your is assigning events to the future elements you might want to the find out what events is currently assigned to these El Ements.

Using developer tools in your browser you can see what events is currently bound to the element by using these 2 methods. First you can display the events by using the console, the second method was to view the events in the event listener wind ow in the developer tools.

Display Events in Console

In your browser if you press F12 a new window called developer Tools would open, this allows your to view the Entir E HTML DOM in + detail, this also have a console feature which would allow you to type in any Javascript to run at this C urrent 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 would display all the events that is currently assigned to the element.

Event Listener Window

The "other" option to "View what events" is currently assigned to a element is to use the Event listener window in yo ur browser ' s developer tools. All of the developer tools, select the element in the HTML DOM, and you want to Investiga F12 Te, on the right side of the windows you'll see a option called Event Listeners.

When you expand this menu you'll see all of the current events assigned to the element including all click events bound fro M jQuery.

To view object registration events using jquery