How to check if an event handler exist using jQuery or JS?

Question

I want to check if an event is available or not before binding a function to it. The problem is that Google Chrome support the event "loadedmetadata" in the Video element while FireFox don't.

I did the following

$('video').bind('loadedmetadata', videoloaded);
videoloaded();

It worked well in Firefox but when I tried in Chrome, the function was executed twice (which is logical). I want to check if loadedmetadata event handler exists or not to run the function only one time in each browser.

If such possibility doesn't exist, any intelligent work around for this?

BrunoLM · Accepted Answer · 2010-10-10 00:43:11Z

5

Check the $video.data("events") if this object contains your event, since you are using .bind all events of this element will be stored in this object.

var $video = $("#video");
var $ve = $video.data("events");

// checking if a `loadedmetadata` object exists in `data("events")`
if ($ve != null && typeof($ve.loadedmetadata) !== undefined)
{
    // has loadedmetadata event
}

Full working example on jsFiddle

edited Oct 10, 2010 at 0:43

answered Oct 10, 2010 at 0:25

BrunoLM

101k86 gold badges311 silver badges464 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Peter Ajtai Over a year ago

@Bruno - I'm slightly more confused now than when I started :(

BrunoLM Over a year ago

@Peter: Assuming he is always using jQuery to bind events, it means all eventhandlers are stored on element.data("events"). It is an object that contains several objects, where those contains information about the event. e.g. event x on an element; the element.data("events") will return: ({x:[{handler:(function () {}), data:(void 0), namespace:"", type:"x", guid:31}]})

Peter Ajtai Over a year ago

Thanks Bruon, I'll have to look into this a little more.

Omar Abid Over a year ago

It doesn't work, at least in FireFox, because even if the Event doesn't exist (not implemented by the browser) it'll get binded and added to that events object. So it'll give wrong results. I have figured out a way though, with the readyState property. Thanks for your input.

BrunoLM Over a year ago

@Omar: loadmetadata is not a standard event w3schools.com/tags/ref_eventattributes.asp . I though you were binding a custom event: api.jquery.com/bind

|

Collectives™ on Stack Overflow

How to check if an event handler exist using jQuery or JS?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related