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

Question

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

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

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

Спасибо.

Answer 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 .

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

• Обнаружение поддержки событий без перехвата браузера

Answer 2

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

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