194

Is it possible to determine whether an element has a click handler, or a change handler, or any kind of event handler bound to it using jQuery?

Furthermore, is it possible to determine how many click handlers (or whatever kind of event handlers) it has for a given type of event, and what functions are in the event handlers?

0

11 Answers 11

141

You can get this information from the data cache.

For example, log them to the console (firebug, ie8):

console.dir( $('#someElementId').data('events') );

or iterate them:

jQuery.each($('#someElementId').data('events'), function(i, event){

    jQuery.each(event, function(i, handler){

        console.log( handler.toString() );

    });

});

Another way is you can use the following bookmarklet but obviously this does not help at runtime.

21
  • 2
    does this only work for event handlers assigned with jQuery?
    – Russ Cam
    Aug 5, 2009 at 22:27
  • 7
    Yes Russ, that i true. But inline handlers are grim and deserve not to be shown!
    – redsquare
    Aug 5, 2009 at 22:28
  • 2
    Great answer. I just want to mention that this does not work for events attached with live (jQuery 1.4.4, FF).
    – Atticus
    Jul 12, 2012 at 8:26
  • 78
    Just a note: $(element).data('events') has been removed in jQuery 1.8. For "debugging, you can use $._data(element, 'events'), but it's undocumented (and may change). blog.jquery.com/2012/08/09/jquery-1-8-released
    – gen_Eric
    Aug 16, 2012 at 18:43
  • 4
    @redsquare Of course I have expected. You can check hundreds of popular answers that have been constantly updated.
    – gotqn
    Oct 28, 2013 at 13:02
133

Killing off the binding when it does not exist yet is not the best solution but seems effective enough! The second time you ‘click’ you can know with certainty that it will not create a duplicate binding.

I therefore use die() or unbind() like this:

$("#someid").die("click").live("click",function(){...

or

$("#someid").unbind("click").bind("click",function(){...

or in recent jQuery versions:

$("#someid").off("click").on("click",function(){...
7
  • 7
    +1 very neat even though it doesn't answer the question. Nov 23, 2011 at 20:41
  • This is the best way, and working way,, worked for me when other ways failed Mar 27, 2012 at 6:39
  • 7
    For jQuery 1.7 and later use .off("click") instead of .die() or .unbind() Aug 13, 2013 at 23:01
  • This is a band aid. It's a better idea to find out why your code is executing twice and fix that bug. Or figure out where else the bind is being called and prevent it.
    – mattalxndr
    Feb 3, 2014 at 3:38
  • 2
    I'd add that if you need to attach an event that only runs once and then removes itself, use the one() method. $("body").one("click",function(){ alert('test');}); Sep 9, 2014 at 11:58
35

I wrote a plugin called hasEventListener which exactly does that :

http://github.com/sebastien-p/jquery.hasEventListener

Hope this helps.

5
  • 2
    This plugin should be the accepted answer for anyone who is using jQuery.
    – apiguy
    Jan 11, 2011 at 22:29
  • Hopefully I can save someone else some time. hasEventListener doesn't work for live bound events. (v1.0.5)
    – SooDesuNe
    Feb 3, 2011 at 21:27
  • 1
    My hasEventListener plugin will be updated this week with now a full support for live and delegated events. Feb 22, 2011 at 22:41
  • 2
    Why isn't this part of jQuery natively!!! good job +1
    – crush
    May 9, 2013 at 17:35
  • 5
    Like... any chance you can supply a 1.9 compatible version? May 28, 2013 at 17:15
19

This solution is no more supported since jQuery 1.8 as we can read on the blog here:

$(element).data(“events”): This is now removed in 1.8, but you can still get to the events data for debugging purposes via $._data(element, "events"). Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version.

So, you should unbind/rebind it or simply, use a boolean to determine if your event as been attached or not (which is in my opinion the best solution).

5
  • Any reason specified as to why it was removed?
    – pilau
    Jul 10, 2013 at 20:00
  • Because it was used (.data) by jQuery to stock their internal events logic. Jul 12, 2013 at 15:55
  • 1
    Which is what $._data does now?
    – pilau
    Jul 13, 2013 at 11:24
  • 1
    I just found this, it explains everything :)
    – pilau
    Jul 13, 2013 at 11:26
  • Where would you set the boolean?
    – Noumenon
    Oct 30, 2015 at 4:26
16

I think this might have updated with jQuery 1.9.*

I'm finding the this is the only thing that works for me at the moment:

$._data($("#yourElementID")[0]).events
10

I wrote a very tiny plugin called "once" which do that:

$.fn.once = function(a, b) {
    return this.each(function() {
        $(this).off(a).on(a,b);
    });
};

And simply:

$(element).once('click', function(){
});
2
  • 2
    This seems to be identical to jQuery's own .one -- api.jquery.com/one -- which has been around since v1.1. Yours just has an extra "c" added in.
    – Luke
    Dec 12, 2018 at 20:16
  • 1
    @Luke I know this is old, but you're wrong. As I understand it, this is different in that jQuery.one() allows the event to run (trigger) ONLY once before self-removing. This .once() function simply ensures that any existing handler is removed before binding the replacement (which can then trigger multiple times). Perhaps the function name is the confusing part, and perhaps better thought of as $.fn.replaceOn()? Jun 22, 2020 at 10:40
10

For jQuery 1.9+

var eventListeners = $._data($('.classname')[0], "events");

I needed the [0] array literal.

5

I don't think that the hasEventListener plugin mentioned will handle custom events e.g.

var obj = {id:'test'};
$(obj).bind('custom', function(){
    alert('custom');
}).trigger('custom');

alert($(obj).hasEventListener('custom'));

Also, at least in jQuery 1.5 I think you need to be careful using $(target).data('events') because it returns differently for events that have been bound to objects as above.

You need to do something like:

var events = $(target).data("events");
if(typeof events === "function"){
   events = events.events;
}

I am using this sort of approach and it works but it feels a bit like I am at the mercy of jquery internals and that really I shouldn't be doing it!

2

I had the same need & quickly patched an existing code to be able to do something like this:

 if( $('.scroll').hasHandlers('mouseout') )  // could be click, or '*'...
 { 
   ... code ..
 }

It works for event delegation too:

 if ( $('#main').hasHandlers('click','.simple-search') )  ...

It is available here : jquery-handler-toolkit.js

1

With reference to SJG's answer and from W3Schools.com

As of jQuery version 1.7, the off() method is the new replacement for the unbind(), die() and undelegate() methods. This method brings a lot of consistency to the API, and we recommend that you use this method, as it simplifies the jQuery code base.

This gives:

$("#someid").off("click").live("click",function(){...

or

$("#someid").off("click").bind("click",function(){...
1
  • 2
    bind is deprecated nowadays, so better use $("#someid").off("click").on("click",function(){... Sep 13, 2017 at 12:58
-6

This works for me: $('#profile1').attr('onclick')

1
  • 1
    it works only if a handler is attached via the "onclick" attribute. How about this case: $('#profile1').click(function(){alert('')});? $('#profile1').attr('onclick') returns undefined.
    – d.k
    Mar 29, 2013 at 23:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.