¿Detecta el soporte para un evento de JavaScript dado?

Estoy interesado en utilizar el evento hashchange de JavaScript para monitorear los cambios en el identificador de fragmento de la URL. Conozco Really Simple History y los complementos jQuery para esto. Sin embargo, he llegado a la conclusión de que en mi proyecto particular no vale realmente la sobrecarga adicional de otro archivo JS.¿Detecta el soporte para un evento de JavaScript dado?

Lo que me gustaría hacer es tomar la ruta de "mejora progresiva". Es decir, quiero probar si el evento hashchange es compatible con el navegador del visitante 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, eh ... ¿hay alguna manera de probar si un navegador admite un evento en particular?

Gracias.

Fuente

2010-05-20 Will

FYI, la frase que está buscando no es "mejora progresiva", pero más bien "degradación grácil". La mejora progresiva es cuando hace que su sitio web sea accesible para todos los usuarios, pero agrega funciones a un grupo más específico de usuarios (habilitado para JavaScript, compatible con HTML5, etc.). La degradación agraciada se produce cuando usted depende de cierta funcionalidad, pero tiene un método de respaldo si el cliente no lo admite. No es que realmente importe. :) –

Hmm. Yo diría que la "degradación elegante" significa que un sitio web continúa funcionando incluso cuando la funcionalidad en la que habitualmente se basa no está disponible. Por el contrario, la "mejora progresiva" se produce cuando un sitio habilita características adicionales de las que no depende, solo cuando el agente de usuario las admite. Planeo escribir este código particular de tal manera que no modifique la propiedad location.hash a menos que el evento hashchange esté disponible. Entonces eso es una mejora progresiva. Y sí, no es que realmente importe, son solo dos caras de una moneda. – Will

Bueno, el mejor enfoque no va a través del navegador oler, Juriy Zaytsev (@kangax) hizo un método muy útil para detectar el apoyo 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 es ahora se usa en algunas bibliotecas como jQuery.

Leer más aquí:

Detecting event support without browser sniffing

Fuente

2010-05-20 20:10:08 CMS

Es un método muy interesante ... Particularmente me gusta la comprobación adicional de ver si ''return;'' se convierte a una función automáticamente. – gnarf

Parece el método más robusto. ¡Gracias por publicarlo! – Will

+1 por mencionar jQuery, [jQuery es realmente el mejor, resuelve todo tipo de problemas del navegador y también es bueno] (http://www.doxdesk.com/img/updates/20091116-so-large.gif) –

El Mozilla documentation sugiere lo siguiente:

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

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

Fuente

2010-05-20 20:17:59 mercator

Muy elegante. Puedo usar una versión de esta modificación con algunas ideas de la otra respuesta que se publicó. Gracias. – Will

No funciona para el evento visibilitychange. – lsborg

Aquí es una modificación de la answer provided by 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; 
}

Fuente

2014-09-30 15:34:03 Antkhan

¿Detecta el soporte para un evento de JavaScript dado?

Respuesta

Cuestiones relacionadas