support de détection pour un événement JavaScript donné?

Question

Je suis intéressé à utiliser l'événement hashchange JavaScript pour surveiller les changements dans l'identifiant de fragment de l'URL. Je suis conscient de Histoire Really Simple et les plugins jQuery pour cela. Cependant, je suis arrivé à la conclusion que dans mon projet particulier, il est pas vraiment la peine les frais généraux ajouté d'un autre fichier JS.

Ce que je voudrais faire est plutôt prendre la voie de la « amélioration progressive ». C'est, je veux tester si l'événement hashchange est pris en charge par le navigateur du visiteur, et d'écrire mon code pour l'utiliser si elle est disponible, comme une amélioration plutôt qu'une caractéristique essentielle. IE 8, Firefox 3.6 et Chrome soutien 4.1.249, et que représente environ 20% du trafic de mon site.

Alors, euh ... est-il un moyen de vérifier si un navigateur prend en charge un événement particulier?

Merci.

Answer 1

Eh bien, la meilleure approche ne passe pas par reniflage du navigateur, Juriy Zaytsev ( @kangax ) a fait une méthode très utile pour la détection de support d'événement:

var isEventSupported = (function(){
  var TAGNAMES = {
    'select':'input','change':'input',
    'submit':'form','reset':'form',
    'error':'img','load':'img','abort':'img'
  }
  function isEventSupported(eventName) {
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
      el.setAttribute(eventName, 'return;');
      isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
  }
  return isEventSupported;
})();

Utilisation:

if (isEventSupported('hashchange')) {
  //...
}

Cette technique est maintenant utilisée dans certaines bibliothèques comme jQuery .

En savoir plus ici:

• soutien sans événement Detecting renifler navigateur

Answer 2

Le documentation Mozilla suggère ce qui suit:

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

Cela fonctionne dans IE8 et la version bêta de Chrome 5 aussi (je n'ai pas testé Chrome 4.1), et échoue correctement dans Opera et Safari.

Answer 3

Voici une modification de la réponse fournie par CMS , qui ne contient pas de fonction dans une autre, que je jugeriez travail:

function event_exists(eventName){
    if(typeof(eventName)!='string' || eventName.length==0)return false;
    var TAGNAMES = {
        'select':'input','change':'input',
        'submit':'form','reset':'form',
        'error':'img','load':'img','abort':'img'
    }
    var el = document.createElement(TAGNAMES[eventName] || 'div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
        el.setAttribute(eventName,'return;');
        isSupported = (typeof(el[eventName])=='function');
    }
    el = null;
    return isSupported;
}