Les gestionnaires d'événements de détection de Javascript sont disponibles sur l'élément HTML

Question

Existe-t-il un moyen de détecter les gestionnaires d'événements disponibles en mode natif pour un élément HTML?

Par exemple:

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 

Idéalement je veux faire la détection de fonctionnalité dans mon script, où se onload est disponible pour un élément à utiliser qui, sinon fallback. Actuellement je dois faire des forks de navigateur (basé sur IE) ce qui est gênant car IE peut commencer à supporter script.onload, et Webkit/Firefox peut commencer à supporter link.onload. Malheureusement, l'affectation de element.onload rend l'événement non plus indéfini, qu'il soit ou non déclenché.

Merci!

Answer 1

(Modifier Voir ci-dessous, cela ne fonctionne pas.) Vous pouvez vérifier si l'élément a une propriété onload:

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

sur IE7, je reçois true pour le img et false pour la script.

Modifier Cela ne fonctionne pas pour Firefox. Laissant cela juste pour que les autres ne descendent pas sur le même chemin.

Answer 2

Je ne sais pas si c'est ce que vous demandiez, mais cela vous permettra de savoir si vous avez une méthode ou une propriété spécifique disponible pour un objet donné.

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-travaillé la réponse à montrer un exemple.

Answer 3

J'ai fait quelque chose comme ça avant; lorsque vous écrivez des choses pour l'écart téléphonique sur l'iphone, selon que vous exécutez l'application dans le simulateur ou sur différentes versions de l'appareil, vous avez souvent des gestionnaires différents pour gérer le clic des boutons d'entrée (et la plupart des autres) de mon script, je fais juste une vérification rapide;

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

alors je peux aller de l'avant et de lier mon gestionnaire d'événements;

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

Answer 4

Voici un exemple distillé de la façon dont Modernizr fait la détection d'événements:

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

Answer 5

Une façon que je l'ai fait dans le passé est d'utiliser l'ancienne « dans » boucle, et vérifier chaque valeur de clé pour voir si elle commence par « on » (chaque gestionnaire d'événements natif que j'ai jamais vu commence de cette façon ...) Ainsi, par exemple:

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's an event handler 
     elEventHandlers.push(prop); //so, add it to the array 

console.log(elEventHandlers);   //then dump the array to the console (or whatever) 

le tour est joué! Vous savez maintenant quels gestionnaires d'événements peuvent être enregistrés sur cet élément!

Answer 6

Essayez celui-ci:

var d = document.createElement('div'); 

if(d.hasOwnProperty('onclick')) { 
    //then onclick is supported 
} 

vous pouvez également boucle à travers les propriétés de div (ou prendre tout autre élément HTML) pour vérifier dynamiquement:

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 
    } 
} 

Vous pouvez vérifier plus sur hasOwnProperty sur mozilla's dev blog

Answer 7

isEventSupported = 
    function(tag, event){ 
    return document.createElement(tag)[event]===null; 
    }; 

>> isEventSupported("script", "onload"); 
true //on my current browser 

Il y a de faux rapports sur cet événement. Les vétérans de rom comme ..., ne mentionnons pas les noms - mais il n'est PAS évident que l'événement onload ne se déclenchera probablement pas sur les éléments SCRIPT des éléments IMG et similaires, car la source a déjà été encaissée et les éléments dont les ressources sont tirées du l'argent ne déclenchera pas l'événement onload.

Exception: l'élément de document déclenche l'événement onload, même lorsque vous travaillez avec des fichiers encaissées, car cela dépend de readystate complète.