Rilevare il supporto per un dato evento JavaScript?

Question

Mi interessa utilizzando l'evento hashchange JavaScript per monitorare i cambiamenti nella identificatore di frammento del URL. Sono consapevole di i plugin jQuery per questo storia realmente semplice e. Tuttavia, ho raggiunto la conclusione che nel mio particolare progetto non è davvero la pena il aggiunto sovraccarico di un altro file JS.

Quello che mi piacerebbe fare, invece, è prendere il percorso "progressive enhancement". Cioè, voglio verificare se l'evento hashchange è supportato dal browser del visitatore, e scrivo il mio codice di usarlo se è disponibile, come un accessorio piuttosto che una caratteristica fondamentale. IE 8, Firefox 3.6 e Chrome 4.1.249 sostegno, e che conti per circa il 20% del traffico del mio sito.

Quindi, uh ... c'è qualche modo per verificare se un browser supporta un evento particolare?

Grazie.

Answer 1

Bene, l'approccio migliore non sta attraversando sniffing del browser, Juriy Zaytsev ( @kangax ) ha fatto un metodo molto utile per il supporto evento rilevazione:

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;
})();

Utilizzo:

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

Questa tecnica viene ora utilizzato in alcune librerie come jQuery .

Per saperne di più qui:

• Individuare il supporto evento senza browser sniffing

Answer 2

Il documentazione Mozilla suggerisce la seguente:

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

Questo funziona in IE8 e Chrome 5 beta troppo (non ho la prova Chrome 4.1), e non riesce correttamente in Opera e Safari.

Answer 3

Ecco una modifica della risposta fornito da CMS , che non contiene una funzione in un altro, che ho pensa possa funzionare:

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