La detección de apoyo para un evento de JavaScript dado?

Question

Estoy interesado en utilizar el evento hashchange JavaScript para monitorear los cambios en el identificador de fragmento de la URL. Soy consciente de historia realmente simple y los plugins jQuery para esto. Sin embargo, he llegado a la conclusión de que en mi proyecto en particular no es realmente vale la pena el agregado de arriba de otro archivo JS.

Lo que me gustaría hacer en su lugar es tomar la ruta "mejora progresiva". Es decir, quiero poner a prueba si el evento hashchange es apoyado por el navegador del visitante, y escribo mi código para utilizarlo si está disponible, como una mejora en lugar de una característica central. IE 8, Firefox 3.6 y Chrome 4.1.249 apoyo, y que representa aproximadamente el 20% del tráfico de mi sitio.

Así que ... ¿hay alguna manera de probar si un navegador es compatible con un evento en particular?

Gracias.

Answer 1

Bueno, el mejor enfoque no va a través de la inhalación de navegador, Juriy Zaytsev ( @kangax ) hizo un método muy útil para el apoyo evento detección:

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

Uso:

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

Esta técnica se usa ahora en algunas librerías como jQuery .

Leer más aquí:

• apoyo evento Detección sin browser sniffing

Answer 2

El documentación de Mozilla sugiere lo siguiente:

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

Esto funciona de IE8 y Chrome 5 beta también (no he probado Chrome 4.1), y falla correctamente en Opera y Safari.

Answer 3

Aquí es una modificación de la respuesta proporcionada por CMS , que no contiene una función en otro, lo que me que podría funcionar:

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