onended - ¿Detectando soporte para un evento JavaScript dado?

onended audio

Question

Estoy interesado en usar el evento de hashchange de JavaScript para monitorear los cambios en el identificador del fragmento de la URL. Soy consciente de Really Simple History y los complementos de jQuery para esto. Sin embargo, he llegado a la conclusión de que en mi proyecto particular no vale la pena la sobrecarga adicional de otro archivo JS.

Lo que me gustaría hacer en cambio es tomar la ruta de "mejora progresiva". Es decir, quiero probar si el navegador del visitante admite el evento hashchange y escribir mi código para usarlo si está disponible, como una mejora en lugar de una función principal. IE 8, Firefox 3.6 y Chrome 4.1.249 lo admiten, y eso representa aproximadamente el 20% del tráfico de mi sitio.

Entonces, uh ... ¿hay alguna manera de probar si un navegador admite un evento en particular?

Gracias.

Answer 1

Aquí hay una modificación de la respuesta proporcionada por CMS , que no contiene una función en otra, que creo que funcionaría:

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 2

Bueno, el mejor enfoque es no @kangax navegador, Juriy Zaytsev ( @kangax ) hizo un método realmente útil para detectar el soporte de eventos:

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 ahora se usa en algunas bibliotecas como jQuery .

Leer más aquí:

• Detección de soporte de eventos sin rastreo del navegador

Answer 3

La documentación de Mozilla sugiere lo siguiente:

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

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