javascript - Check if event exists on element

ID : 20292

viewed : 5

Tags : javascriptjqueryjquery-eventseventtriggerjavascript

Top 5 Answer for javascript - Check if event exists on element

vote vote

93

$('body').click(function(){ alert('test' )})  var foo = $.data( $('body').get(0), 'events' ).click // you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.  $.each( foo, function(i,o) {     alert(i) // guid of the event     alert(o) // the function definition of the event handler }); 

You can inspect by feeding the object reference ( not the jQuery object though ) to $.data, and for the second argument feed 'events' and that will return an object populated with all the events such as 'click'. You can loop through that object and see what the event handler does.

vote vote

84

You may use:

$("#foo").unbind('click'); 

to make sure all click events are unbinded, then attach your event

vote vote

79

To check for events on an element:

var events = $._data(element, "events") 

Note that this will only work with direct event handlers, if you are using $(document).on("event-name", "jq-selector", function() { //logic }), you will want to see the getEvents function at the bottom of this answer

For example:

 var events = $._data(document.getElementById("myElemId"), "events") 

or

 var events = $._data($("#myElemId")[0], "events") 

Full Example:

<html>     <head>         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>         <script>             $(function() {                 $("#textDiv").click(function() {                     //Event Handling                 });                 var events = $._data(document.getElementById('textDiv'), "events");                 var hasEvents = (events != null);             });         </script>     </head>     <body>         <div id="textDiv">Text</div>     </body> </html> 

A more complete way to check, that includes dynamic listeners, installed with $(document).on

function getEvents(element) {     var elemEvents = $._data(element, "events");     var allDocEvnts = $._data(document, "events");     for(var evntType in allDocEvnts) {         if(allDocEvnts.hasOwnProperty(evntType)) {             var evts = allDocEvnts[evntType];             for(var i = 0; i < evts.length; i++) {                 if($(element).is(evts[i].selector)) {                     if(elemEvents == null) {                         elemEvents = {};                     }                     if(!elemEvents.hasOwnProperty(evntType)) {                         elemEvents[evntType] = [];                     }                     elemEvents[evntType].push(evts[i]);                 }             }         }     }     return elemEvents; } 

Example usage:

getEvents($('#myElemId')[0]) 
vote vote

67

use jquery event filter

you can use it like this

$("a:Event(click)") 
vote vote

56

Below code will provide you with all the click events on given selector:

jQuery(selector).data('events').click 

You can iterate over it using each or for ex. check the length for validation like:

jQuery(selector).data('events').click.length 

Thought it would help someone. :)

Top 3 video Explaining javascript - Check if event exists on element

Related QUESTION?