Javascript detect event handlers available on HTML element

Question

Is there a way to detect what event handlers are available natively for an HTML element?

For example:

isAvailable(img.onload) === true;    // All browsers
isAvailable(script.onload) === true; // Non-IE only (Webkit, Firefox, Opera)
isAvailable(link.onload) === true;   // IE (and I think Opera) only

Ideally I want to do feature detection in my script, where if onload is available for an element to use that, otherwise fallback. Currently I am having to do browser forks (based on IE) which is annoying as IE may start supporting script.onload, and Webkit/Firefox may start supporting link.onload.

Unfortunately assigning element.onload makes the event no longer 'undefined', regardless of whether it will eventually fire or not.

Thanks!

Answer 1

(Edit See below, this doesn't work.) You can check whether the element has an onload property:

var img = document.createElement('img');
alert("img onload? " + ('onload' in img));
var script = document.createElement('script');
alert("script onload? " + ('onload' in script));

On IE7, I get true for the img, and false for the script.

Edit This doesn't work for Firefox. Leaving this just so others don't go down the same path.

Answer 2

I am not sure if this is what you were asking for, but this will let you know if you have a specific method or property available for a given object.

var apple = new Object;
    apple.load = function() { alert("I am a method.") };
    apple.color = "red"

function isAvailable(obj, mp) { 
    // obj = element to test for method or property. 
    // mp = name of method or property. 

    if (obj[mp]) {
        return true;
    } else {
        return false;
    }
}

if (isAvailable(apple, "color")) {
    alert("apple object has a 'color' property");
}

if (isAvailable(apple, "load")) {
    alert("apple object has a 'load' method");
}

Edit: Re-worked the answer to show an example.

Answer 3

I've done something like this before; when writing stuff for phone gap on the iphone, depending if you run the app in the simulator or on different versions of the device, you often have different handlers for handling the click of input buttons (and most other things)- so at the top of my script i just do a quick check;

var m_clickEvent = ''; 

if ( $('input').click != 'undefined')
   m_clickEvent = 'click'
else if ( $('input').tap != 'tap')
   m_clickEvent = 'tap'
else if ( $('input').touchstart!= 'touchstart')
   m_clickEvent = 'touchstart'
else 
   // some kind of error handling..

then i can go ahead and bind my event handler;

$('.myButton').bind(m_clickEvent, function(e) { ... });