Обнаружение поддержки для данного события JavaScript?

Мне интересно использовать событие hashchange JavaScript для отслеживания изменений в идентификаторе фрагмента URL. Я знаю Really Simple History и плагины jQuery для этого. Тем не менее, я пришел к выводу, что в моем конкретном проекте это не стоит дополнительных накладных расходов на другой JS файл.

Вместо этого я хотел бы воспользоваться маршрутом "прогрессивного улучшения". То есть, я хочу проверить, поддерживается ли событие hashchange браузером посетителя, и написать мой код, чтобы использовать его, если он доступен, в качестве улучшения, а не основной функции. IE 8, Firefox 3.6 и Chrome 4.1.249 поддерживают это, и на это приходится около 20% трафика моего сайта.

Итак, uh... есть ли способ проверить, поддерживает ли браузер конкретное событие?

Спасибо.

Ответы

Ответ 1

Ну, лучший подход не проходит через обнюхивание браузера, Юрий Зайцев (@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.

Подробнее здесь:

Ответ 2

Документация Mozilla предлагает следующее:

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

Это работает и в IE8, и в бета-версии Chrome 5 (я не тестировал Chrome 4.1), и правильно работает в Opera и Safari.

Ответ 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;
}