correctamente enlazar eventos de javascript

Question

Estoy buscando la manera más adecuada y eficiente de vincular eventos javascript; particularmente el evento de carga (me gustaría que ocurriera el evento después de cargar la página Y todos los elementos, como las imágenes). Sé que hay formas simples de hacer esto en jQuery, pero me gustaría el método más eficiente raw javascript.

Answer 1

Hay dos formas diferentes de hacerlo. Solo uno funcionará; cuál depende del navegador. He aquí un método de utilidad que utiliza tanto:

function bindEvent(element, type, handler) { 
    if(element.addEventListener) { 
     element.addEventListener(type, handler, false); 
    } else { 
     element.attachEvent('on'+type, handler); 
    } 
} 

En su caso:

bindEvent(window, 'load', function() { 
    // all elements such as images are loaded here 
}); 

Answer 2

window.onload = function() { 
    // ... 
}; 

Answer 3

Sé que no sólo se pregunta acerca de cómo enlazar eventos. Pero Ooooo, la diversión no termina allí. Hay mucho más para obtener este navegador cruzado correcto que solo el enlace inicial.

La respuesta de @d. Será suficiente para el caso específico del evento load de que está buscando. Pero puede dar a los lectores novatos de su código una falsa sensación de "hacerlo bien". Solo porque hayas vinculado el evento no significa que hayas tenido cuidado de normalizarlo. Usted puede ser mejor de simplemente fijar window.onload:. Respuesta

window.onload = (function(onload) { 
    return function(event) { 
    onload && onload(event); 

    // now do your thing here 
    } 
}(window.onload)) 

Sin embargo, para el caso general de eventos @ d unión de está tan lejos de satisfactorio como para ser frustrante. Lo único que hace bien es usar detección de características en lugar de detección de navegador.

Para no exagerar mucho aquí, pero el enlace de eventos de JavaScript probablemente sea el razón número 1 para ir con una biblioteca de JavaScript. No me importa cuál es, otras personas han solucionado este problema una y otra vez. Acá los problemas de una aplicación casera una vez dentro de la función de controlador:

• ¿Cómo puedo obtener una bodega de la event objeto en sí?
• ¿Cómo evito que la acción predeterminada del evento (por ejemplo, al hacer clic en un vínculo, pero no navegar)
• ¿Por qué this punto al objeto window todo el tiempo?
• (eventos de mouse Re) ¿Cuáles son los coords x/y del evento?
• ¿Qué botón del mouse activó el evento?
• ¿Fue un Ctrl-clic o simplemente un clic normal?
• ¿En qué elemento se desencadenó realmente el evento?
• ¿Qué elemento va al evento a? (es decir, relatedTarget, digamos por blur)
• ¿Cómo cancelo el burbujeo del evento a través de su DOM principal?
• (Re evento burbujeando) ¿Qué elemento está recibiendo realmente el evento ahora? (es decir, currentTarget)
• ¿Por qué no puedo obtener el código de error del evento keydown?
• ¿Por qué mi página tiene una pérdida de memoria cuando agrego todos estos controladores de eventos? Argh!
• ¿Por qué no puedo desvincular esta función anónima que envié antes?

Y la lista sigue ...

La única buena razón para rodar su propia en estos días es para el aprendizaje. Y eso está bien. Aún así, lea PPK's Intro to browser events. Mira el jQuery source. Mira el Prototype source. No te arrepentirás.

Answer 4

Algo así

window.onload = (function(onload) { 
    return function(event) { 
     onload && onload(event); 

     $(".loading-overlay .spinner").fadeOut(300), 
      $(".loading-overlay").fadeOut(300); 
      $("body").css({ 
       overflow: "auto", 
       height: "auto", 
       position: "relative" 
      }) 
    } 
}(window.onload));