特定のJavaScriptイベントのサポートを検出しますか？

Question

JavaScript Hashchangeイベントを使用して、URLのフラグメント識別子の変化を監視することに興味があります。私は知っています 本当にシンプルな歴史 そして、これのためのjQueryプラグイン。しかし、私の特定のプロジェクトでは、別のJSファイルのオーバーヘッドを追加する価値がないという結論に達しました。

代わりに私がやりたいのは、「プログレッシブエンハンスメント」ルートを取ることです。つまり、Hashchangeイベントが訪問者のブラウザによってサポートされているかどうかをテストし、コードを使用できる場合は、コードをコア機能ではなく拡張機能として使用するかどうかをテストしたいと思います。 IE 8、Firefox 3.6、およびChrome 4.1.249はそれをサポートしており、それは私のサイトのトラフィックの約20％を占めています。

それで、ええと...ブラウザが特定のイベントをサポートするかどうかをテストする方法はありますか？

ありがとう。

Answer 1

まあ、最良のアプローチはブラウザのスニッフィング、juriy zaytsev（@kangax）イベントサポートを検出するための非常に便利な方法を作成しました。

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

使用法：

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

この手法は、現在、一部のライブラリで使用されています jquery.

こちらをご覧ください：

• ブラウザのスニッフィングなしでイベントサポートを検出します

Answer 2

モジラのドキュメント 以下を提案します。

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

これはIE8とChrome 5ベータでも機能し（Chrome 4.1をテストしませんでした）、OperaとSafariで正しく失敗します。

Answer 3

これが変更です CMSが提供する回答, 、これには別の関数には含まれていませんが、これはうまくいくと思います。

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