Separazione codice JavaScript

Cercando in rete, ho trovato i modi più disparati per aggiungere un listener ad un elemento: chiamare una funzione in body onLoad(), oppure aggiungere un listener all’ evento “load” per lanciare una funzione onClick……le cose più assurde !!

Basta semplicemente seguire questi passi:

  • Includere lo script nell’ head con:
    <script src="nomefile.js" type="text/javascript"><!--mce:0--></script>
  • Scrivere in nomefile.js una funzione che viene eseguita al caricamento della pagina, in cui si assegnano i listener agli oggetti della pagina:
    window.addEventListener(
            'load',
            nomefunzione,
            false);
    

    Oppure, in modo più semplice:

    window.onload = function() {
            document.getElementById('id-elemento').addEventListener('click', callback, false);
            ......
    }
    
  • con la precedente ‘nomefunzione’ possiamo impostare i listener per gli elementi che ci interessano.

Rimane in sospeso una questione: “quando” avviene l’ evento window.onload ?
Se una qualche immagine è ancora da caricare nella pagina, alcuni altri elementi sono invece già visualizzati, ma la funzione onload ancora non viene eseguita.
Il discorso è complesso: di Peter Michaux.
Ovviamente ci sono delle differenze tra i vari browser e tra le varie versioni dei browser: se si vuole tenere conto di queste differenze bisogna scrivere qualcosa di più complesso; per un esempio vedere

//setup onload function
if(typeof window.addEventListener != 'undefined')
{
    //.. gecko, safari, konqueror and standard
    window.addEventListener('load', funzione, false);
}
else if(typeof document.addEventListener != 'undefined')
{
    //.. opera
    document.addEventListener('load', funzione, false);
}
else if(typeof window.attachEvent != 'undefined')
{
    //.. win/ie
    window.attachEvent('onload', funzione);
}

//** remove this condition to degrade older browsers
else
{
    //.. mac/ie5 and anything else that gets this far

    //if there's an existing onload function
    if(typeof window.onload == 'function')
    {
        //store it
        var existing = onload;

        //add new onload handler
        window.onload = function()
        {
            //call existing onload function
            existing();

            //call generic onload function
            funzione();
        };
    }
    else
    {
        //setup onload function
        window.onload = funzione;
    }
}

Ma anche così potrebbero esserci delle limitazioni.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...