Erkennen Unterstützung für eine Veranstaltung JavaScript gegeben?

Question

Ich bin daran interessiert, das JavaScript hashchange Ereignis in mit Änderungen in der Fragmentbezeichner URL zu überwachen. Ich bin mir dessen bewusst Really Simple History und die jQuery-Plugins für diese. Allerdings hat ich zu dem Schluss gekommen, dass in meinem speziellen Projekt ist es nicht wirklich den Wert Overhead einer anderen JS-Datei hinzugefügt.

Was möchte ich stattdessen zu tun ist, um die „Progressive Enhancement“ Route. Das heißt, mag ich testen, ob das hashchange Ereignis von dem Browser des Besuchers unterstützt wird, und schreiben Sie meinen Code, es zu benutzen, wenn es verfügbar ist, als eine Erweiterung eher als eine Kernfunktion. IE 8, Firefox 3.6 und Chrome 4.1.249 Unterstützung es, und das macht etwa 20% meiner Website-Traffic.

Also, äh ... ist es eine Möglichkeit, zu prüfen, ob ein Browser ein bestimmtes Ereignis unterstützt?

Danke.

Answer 1

Nun, der beste Ansatz wird nicht durch Browser-Sniffing, Juriy Zaytsev ( @kangax ) eine wirklich nützliche Methode hergestellt zum Erfassen Ereignisunterstützung:

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

Verbrauch:

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

Diese Technik wird nun in einigen Bibliotheken verwendet wie jQuery .

Lesen Sie mehr hier:

• Detecting Event-Support ohne Browser Sniffing

Answer 2

Die Mozilla Dokumentation die folgende schlägt vor:

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

Das funktioniert in IE8 und Chrome 5 Beta zu (habe ich nicht getestet Chrome 4.1), und nicht ordnungsgemäß in Opera und Safari.

Answer 3

Dies ist eine Modifikation der Antwort zur Verfügung gestellt von CMS , die keine Funktion in einem anderen enthält, die ich denken funktionieren würde:

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