Un método para adjuntar el detector de eventos, compatible con todos los principales navegadores web

Question

Necesito escribir un fragmento de código que adjunte un oyente al evento seleccionado, y que funcionará en cualquier navegador popular, en cualquier versión del mismo. Después de hacer algunas búsquedas salí con la siguiente función:

function addListener(event, thefunction) 
{ 
    if(window.addEventListener) 
    { 
     //All browsers, except IE before version 9. 
     window.addEventListener(event, thefunction, false); 
    } 
    else if(window.attachEvent) 
    { 
     //IE before version 9. 
     window.attachEvent(event, thefunction); 
    } 
} 

Bastante simple y parece ser autoexplicativo.

Puede haber algún problema con el evento DOMContentLoaded, ya que ninguna versión de IE (AFAIK) lo reconoce, y los desarrolladores están obligados a usar onreadystatechange en su lugar. La solución de este problema también parece ser bastante sencilla, hasta que Internet Explorer 9. Había que escribir solamente una línea adicional en else if(window.attachEvent):

event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : "on" + event; 

Esta parte siempre fue despedido en cualquier versión de Internet Explorer y esta línea ha proporcionado un simple traducción del nombre del evento, por lo que siempre se usó el correcto.

Pero, ¿qué hay de Internet Explorer 9 (y superior)? En el que Microsoft decidió que caerá attachEvent a favor de addEventListener. Pero no cambió onreadystatechange en DOMContentLoaded.

no puedo usar encima de la línea de window.addEventListener parte, porque esto reescribir DOMContentLoaded en onreadystatechange caso, incluso para otros navegadores y dejar allí, ya que utilizan DOMContentLoaded.

Entonces, ¿la única manera de resolver este problema, es añadir la detección del navegador (tipo y versión) para window.addEventListener parte y si detecta que el guión está tratando con IE 9 o superior, se volverá a escribir el nombre del evento de DOMContentLoaded a onreadystatechange (y complemente el nombre de otros eventos con on, requerido para IE), y en el caso de otros navegadores, ¿no se cambiará el nombre del evento?

O tal vez estoy equivocado, porque como acabo de probar, ni DOMContentLoaded ni onreadystatechange están siendo disparados en mi IE 8 (el primero se dispara correctamente en FF/Chrome).

¿Y qué hay de la función .on() de jQuery (o similar)? ¿Alguien sabe si admite la conexión entre navegadores de DOMContentLoaded, por lo que puedo estar seguro de que este tipo específico de evento será detectado por mi script, sin importar en qué navegador o su versión estoy usando?

Answer 1

DOMContentLoaded es compatible de forma nativa en IE9 y por encima y se puede conectar a través de la addEventListener método W3C-estándar que también se implementó en IE9:

document.addEventListener('DOMContentLoaded', function() { 
    console.log('DOM ready'); 
}, false); 

que funcionará en todos los navegadores modernos y IE de la versión 9 y arriba.

jQuery 1.x es compatible con IE6 + y cualquier otro navegador actualizado hasta la fecha. jQuery puede enganchar un DOM evento ready entre navegadores calzando apoyo a través de la IE6-8 DOM ready handler:

$(function() { 
    //DOM has loaded, put your code here 
}); 

---

.on() proporciona event delegation, pero eso es más bien relacionadas con la pregunta.

Answer 2

IE9 admite DOMContentLoaded. Ver here.

Teniendo esto en cuenta, puede * trabajar en la suposición de que, si se admite addEventListener, también lo es DOMContentLoaded.

(* a menos que alguien llegue a su página con Opera 8 o Safari 3.0, probablemente poco probable).

En cuanto a jQuery, difiere a DOMContentLoaded donde esto es compatible, pero vuelve a su forma histórica de detectar DOM-ready, lo que implica comprobar repetidamente el árbol DOM para ver si todavía existe document.body. Por lo que sólo puede utilizar su DOM listo manejador:

$(function() { 

sin tener que utilizar on().

Más información sobre cómo jQuery lo hace in this answer.