correttamente associare eventi javascript

Question

Sto cercando il modo più corretto ed efficace per associare eventi javascript; in particolare l'evento onload (vorrei che l'evento si verificasse dopo aver caricato sia la pagina che tutti gli elementi come le immagini). So che ci sono modi semplici per farlo in jQuery ma mi piacerebbe il più efficiente metodo javascript.

Answer 1

Ci sono due modi per farlo. Solo uno funzionerà; quale dipende dal browser. Ecco un metodo di utilità che utilizza sia:

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

Nel tuo caso:

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

Answer 2

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

Answer 3

So che hai chiesto solo a come associare gli eventi. Ma il ragazzo Ooooo il divertimento non finisce qui. C'è molto di più per ottenere questo giusto cross-browser oltre al binding iniziale.

@ d. La risposta è sufficiente per il caso specifico dell'evento load di window che stai cercando. Ma può dare ai lettori meno esperti del tuo codice un falso senso di "farlo bene". Solo perché hai legato l'evento non significa che hai avuto cura di normalizzarlo. Si può essere meglio di solo fissaggio window.onload:.

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

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

Ma per il caso generale di evento vincolante @ d di risposta è così lontano da soddisfacente da essere frustrante. L'unica cosa che fa bene è usare il rilevamento delle caratteristiche piuttosto che il rilevamento del browser.

In questo caso, non è necessario eseguire troppo rant ma il collegamento degli eventi JavaScript è probabilmente il motivo # 1 per andare con una libreria JavaScript. Non mi interessa quale sia, altre persone hanno risolto questo problema più e più volte. Here're i problemi in un'implementazione fatta in casa, una volta all'interno della vostra funzione di gestione:

• Come posso ottenere una sospensione dell'oggetto event stesso?
• Come posso evitare l'azione predefinita dell'evento (ad esempio cliccando su un link, ma non la navigazione)
• Perché this punto all'oggetto window tutto il tempo?
• (Per gli eventi del mouse) Quali sono le coordinate x/y dell'evento?
• Quale pulsante del mouse ha attivato l'evento?
• Era un clic Ctrl o un semplice clic?
• Quale elemento è stato effettivamente attivato l'evento?
• Qual è l'elemento che va da a? (es. relatedTarget, ad esempio per blur)
• Come si cancella il bubbling dell'evento tramite il relativo DOM padre?
• (evento ribollente) che elemento sta effettivamente ricevendo l'evento ora? (es. currentTarget)
• Perché non riesco ad ottenere il codice anomalo di questo evento keydown?
• Perché la mia pagina perde memoria quando aggiungo tutti questi gestori di eventi? Argh!
• Perché non riesco a Separare questa funzione anonima che ho legato in precedenza?

E l'elenco potrebbe continuare ...

L'unica buona ragione per rotolare il proprio in questi giorni è per l'apprendimento. E va bene. Ancora, leggi l'articolo Intro to browser events di PPK. Guarda lo jQuery source. Guarda lo Prototype source. Non te ne pentirai.

Answer 4

Qualcosa del genere

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