test if event handler is bound to an element in jQuery

Question

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?

score 141 · Accepted Answer · edited Oct 25 '18 at 07:13

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.

edited Oct 25 '18 at 07:13

gotqn

42,737
46
157
243

answered Aug 05 '09 at 22:23

redsquare

78,161
20
151
159

2

does this only work for event handlers assigned with jQuery? – Russ Cam Aug 05 '09 at 22:27
7

Yes Russ, that i true. But inline handlers are grim and deserve not to be shown! – redsquare Aug 05 '09 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 '12 at 08:26
@Atticus Correct because the delegated event using .live is attached to a container. (use .on rather than .live if using a modern jquery version) – redsquare Jul 12 '12 at 15:12
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). http://blog.jquery.com/2012/08/09/jquery-1-8-released/ – gen_Eric Aug 16 '12 at 18:43
@Rocket Hazmat, so question should be open with the jQuery 1.8? Or there is some other way do detect whether handler is attached? – d.k Nov 09 '12 at 17:35
@caligula: I don't know how it works in jQuery 1.8. I'd say open a new question if it becomes a problem. – gen_Eric Nov 09 '12 at 17:42
I tried this with an element that has a lot of handlers bound using `jQuery.on`, but the console says `undefined`! Any advice? – Rutwick Gangurde Feb 05 '13 at 09:38
@Rutwick Gangurde this was always an undocumented feature - I heard they may have removed it but I am not as close to jquery anymore. Remember that on binds to the container not the element itself. – redsquare Feb 05 '13 at 10:26
@redsquare Thanks! Any other way to find what handlers were bound to a particular element? – Rutwick Gangurde Feb 05 '13 at 11:04
1

@RutwickGangurde yes $._data(element, "events") – redsquare Feb 05 '13 at 11:33
@redsquare Cool... trying that... – Rutwick Gangurde Feb 05 '13 at 11:35
2

@gotqn do you expect everyone to update all their answers to keep in touch with new api's, notice the date of the answer..... – redsquare Oct 28 '13 at 11:19
1

@gotqn - you should practise before preaching – redsquare Oct 28 '13 at 11:25
4

@redsquare Of course I have expected. You can check hundreds of popular answers that have been constantly updated. – gotqn Oct 28 '13 at 13:02
1

@gotqn the issue is actually StackOverflow and the lack of tech versioning – redsquare Oct 28 '13 at 14:02
2

$._data($("#element")[0]).events – jtromans Dec 16 '13 at 12:26
2

These solutions no longer work. You have to set boolean variables manually now. – timetofly May 12 '15 at 20:12
1

@Blossoming_Flower The $._data() jQuery method still works in the latest version of jQuery. proof: https://codepen.io/alakatos/pen/MovJyG – aron.lakatos Jun 23 '17 at 10:04
You can also use function 'hasOwnProperty' with the event name. – mullen18 Nov 21 '18 at 09:37
this does not show anything on chrome for `mouseenter` and `mouseleave` events – Muhammad Omer Aslam Aug 13 '19 at 23:27

score 133 · Answer 2 · edited Mar 29 '14 at 00:16

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(){...

edited Mar 29 '14 at 00:16

Dave Jarvis

30,436
41
178
315

answered Aug 09 '11 at 17:41

SJG

1,753
1
15
10

7

+1 very neat even though it doesn't answer the question. – Zephyr was a Friend of Mine Nov 23 '11 at 20:41
This is the best way, and working way,, worked for me when other ways failed – Mazhar Ahmed Mar 27 '12 at 06:39
7

For jQuery 1.7 and later use `.off("click")` instead of `.die()` or `.unbind()` – David Clarke Aug 13 '13 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 03 '14 at 03:38
Have to agree with @mattalxndr. At least use namespaces in such a case to avoid disabling events bound by unrelated code, like this: $("#someid").die("click.myPlugin").live("click.myPlugin",function(){... – Claus Conrad Sep 04 '14 at 11:09
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');}); – Daniel Katz Sep 09 '14 at 11:58
@SJG: Is it a safe approach? What if in the middle of re-binding operation (after `off`, but yet before `on`) an event is raised? The handler is not going to intercept it, is it? – jwaliszko Aug 29 '15 at 13:37

score 35 · Answer 3 · answered Dec 29 '10 at 12:04

35

I wrote a plugin called hasEventListener which exactly does that :

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

Hope this helps.

answered Dec 29 '10 at 12:04

Sebastien P.

709
7
6

2

This plugin should be the accepted answer for anyone who is using jQuery. – apiguy Jan 11 '11 at 22:29
Hopefully I can save someone else some time. hasEventListener doesn't work for `live` bound events. (v1.0.5) – SooDesuNe Feb 03 '11 at 21:27
1

My hasEventListener plugin will be updated this week with now a full support for live and delegated events. – Sebastien P. Feb 22 '11 at 22:41
2

Why isn't this part of jQuery natively!!! good job +1 – crush May 09 '13 at 17:35
5

Like... any chance you can supply a 1.9 compatible version? – zeroasterisk May 28 '13 at 17:15

score 19 · Answer 4 · answered May 13 '13 at 14:16

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).

answered May 13 '13 at 14:16

adriendenat

3,445
1
25
25

Any reason specified as to why it was removed? – pilau Jul 10 '13 at 20:00
Because it was used (.data) by jQuery to stock their internal events logic. – adriendenat Jul 12 '13 at 15:55
1

Which is what `$._data` does now? – pilau Jul 13 '13 at 11:24
1

I just found [this](http://stackoverflow.com/a/7788375/1049693), it explains everything :) – pilau Jul 13 '13 at 11:26
Where would you set the boolean? – Noumenon Oct 30 '15 at 04:26

score 16 · Answer 5 · answered Dec 16 '13 at 12:28

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

answered Dec 16 '13 at 12:28

jtromans

4,183
6
35
33

score 10 · Answer 6 · answered Sep 29 '14 at 13:58

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(){
});

answered Sep 29 '14 at 13:58

Rodolfo Jorge Nemer Nogueira

4,915
2
41
30

2

This seems to be identical to jQuery's own `.one` -- http://api.jquery.com/one/ -- which has been around since v1.1. Yours just has an extra "c" added in. – Luke Dec 12 '18 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()? – Jon Bellamy Jun 22 '20 at 10:40

score 10 · Answer 7 · answered May 03 '15 at 15:02

10

For jQuery 1.9+

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

I needed the [0] array literal.

answered May 03 '15 at 15:02

Union find

7,759
13
60
111

score 5 · Answer 8 · answered Feb 15 '11 at 08:59

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!

score 2 · Answer 9 · answered Jul 20 '14 at 23:40

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

score 1 · Answer 10 · edited May 23 '17 at 12:18

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(){...

edited May 23 '17 at 12:18

Community

1
1

answered Aug 13 '13 at 22:52

David Clarke

12,888
9
86
116

2

bind is deprecated nowadays, so better use `$("#someid").off("click").on("click",function(){...` – Zoltán Süle Sep 13 '17 at 12:58

score -6 · Answer 11 · answered Mar 29 '13 at 19:28

-6

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

answered Mar 29 '13 at 19:28

Mike

121
1
3
9

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 '13 at 23:44

test if event handler is bound to an element in jQuery

11 Answers11

Linked

Related