检测对给定 JavaScript 事件的支持？

Question

我有兴趣使用 JavaScript hashchange 事件来监视 URL 片段标识符的更改。我知道 Really Simple History 以及相关的 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

Mozilla 文档建议如下：

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

这也适用于 IE8 和 Chrome 5 beta（我没有测试 Chrome 4.1），并且在 Opera 和 Safari 中正确失败。

编辑：我链接到的 Mozilla 页面不再包含任何建议。我也找不到任何其他包含事件检测建议的 Mozilla 文档。

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

Answer 4

我认为最简单的解决方案是对事件类进行 typeof 检查。

例如：typeof(InputEvent) 在 Chrome 中返回 "function"，在 Internet Explorer 中返回 "undefined"。