Javascript detects event handlers available in HTML element

Question

Is there a way to determine which event handlers are initially available for an HTML element?

For instance:

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 a function detection in my script, where if onload is available for the element that will use it, otherwise it's a reserve. Currently, I have to make browser forks (based on IE), which is annoying since IE may start supporting script.onload and Webkit / Firefox may start supporting link.onload.

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

Thanks!

Answer 1

( Edit . See below, this does not work.) You can check if the element has the onload property:

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

In IE7, I get true for img and false for script .

Change This does not work for Firefox. Leaving it just so that others don't go the same way.

Answer 2

I'm not sure if this is what you asked for, but it will let you know if you have a specific method or property available for this 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-processed the response to show an example.

Answer 3

I already did something similar; when writing material to break the phone on iphone, depending on whether you run the application in the simulator or on different versions of the device, you often have different handlers for handling clicks of the input buttons (and most other things) - so at the top of my script I just doing 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 continue and bind an event handler;

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

Answer 4

Here's an example extracted from the Modernizr path that detects an event:

 var tmp = document.createElement('script'); tmp.setAttribute('onload', ''); isSupported = typeof tmp.onload == 'function'; 

Answer 5

One way I've done in the past is to use the old "in in" loop and check each key value to see if it starts with "on" (every event handler I have ever seen runs this path ...) So, for example:

 var el = document.querySelector("*"), //this is the element (use whatever selector text) elEventHandlers = []; //set up an array to hold 'em all for (var prop in el) //loop through each prop of the element if (prop.substring(0,2)=="on") //if the prop starts with "on" it an event handler elEventHandlers.push(prop); //so, add it to the array console.log(elEventHandlers); //then dump the array to the console (or whatever) 

voila! Now you know which event handlers can be registered with this element!

Answer 6

Try the following:

 var d = document.createElement('div'); if(d.hasOwnProperty('onclick')) { //then onclick is supported } 

you can also cycle through div properties (or accept any other HTML elements) to dynamically check it:

 var d = document.createElement('div'), el = 0; for(el in d) { if(d.hasOwnProperty(el)) { console.log(d[el]); //or do anything else you like } } 

You can check more at hasOwnProperty on the mozilla dev blog

Answer 7

 isEventSupported = function(tag, event){ return document.createElement(tag)[event]===null; }; >> isEventSupported("script", "onload"); true //on my current browser 

There are false reports about this event even from veterans like ... suppose they don’t mention names, but it’s NOT obvious that the onload event most likely does not work on IMG SCRIPT elements and the like, because the source is already cashed, and Elements whose resources are extracted from cash will not trigger the onload event.

Exception: the document element will trigger the onload event, even when working with shared files, as it depends on the completion of readistate.