Bonjour, amis Zéros :)
Il est possible de lancer plusieurs fonctions au chargement de la page en utilisant l'évènement onload de l'élément body. Mais dans ce tutoriel, je vais vous apprendre à charger plusieurs fonctions avec le gestionnaire d'événement traditionnel, qui est sous la forme window.onload. Nous apprendrons aussi à le faire par les addEventListener.
Comme expliqué en introduction, j'ai conseillé d'utiliser le gestionnaire d'événements traditionnel, au lieu de celui en-ligne.
Le gestionnaire d'événements traditionnel permet d'éclaircir le code XHTML car le lancement des scripts au chargement de la page est paramétré dans les fichiers, et on n'a pas à faire ce genre de chose :
<body onload="scope(); load_events(); date()">
Avec le gestionnaire d'événements traditionnel, on met à la fin du fichier javascript cette ligne :
//Code....
window.onload = fonction_du_fichier; //SANS parenthèses (pas le droit aux arguments donc :( )
C'est propre, c'est clean, c'est cool :)
Oui mais voilà...
Si vous essayiez de lancer plusieurs fonctions depuis plusieurs fichiers, vous allez vous rendre compte... que seul le dernier est chargé :euh:
Comment est-ce possible ?
En fait, quand vous refaites window.onload = truc_machin, vous écrasez la fonction précédente (elle est remplacée par la suivante).
:ange: Moi je sais comment on va faire pour régler ça ! On va faire window.onload += truc_machin et tout rentrera dans l'ordre !
Perdu :p Ce serait trop simple.
Comment va-t-on faire pour régler ce problème ?
Je vous donne le raisonnement :
On va stocker toutes les fonctions à charger en même temps que la page dans un array de fonctions, avec... une fonction
On les exécute une par une via une autre fonction, qui sera elle lancée par window.onload
En théorie, ça marche, mais dans la pratique ? A vos claviers :-°
...
var FunOnl = new Array(); //L'array qui sert au stockage des fonctions
function lancer(fonction) { //Fonction qui devra être appelée à la place de window.onload
FunOnl[FunOnl.length] = fonction; //On stocke les fonctions dans l'array. Il commence à 0, et length donne l'indice du dernier élément + 1.
}
window.onload = function() { //On appelle ça une fonction anonyme (elle n'a pas de nom, la pauvre ;) )
for(var i = 0, longueur = FunOnl.length; i < longueur; i++) //On utilise longueur pour ne pas recalculer la taille à chaque fois.
FunOnl[i](); //On exécute les fonctions.
};
Il vous suffit maintenant de faire appel à lancer() plutôt que window.onload pour lancer vos scripts aux chargements de page !
C'est une première solution, elle marche, mais on peut faire mieux :D
OK, OK, la solution précédente marche. Mais notre fonction serait plus simple si, plutôt que de créer notre array de fonctions (c'est un peu tordu), on "surveillait" la fenêtre, pour savoir quand elle est chargée. Ensuite, on ajoute successivement les fonctions à charger en les "ajoutant" au gestionnaire onload.
Aque comment on fait ça ?
On va utiliser une méthode appelée addEventListener (spécification du W3C). Elle s'utilise comme suit :
element.addEventListener("événement_sans_on_devant", fonction_a_executer, propagation_evenement_(booleen));
Mais comme IE a implémenté la fonctionnalité avant sa standardisation, lui utilise une fonction appelée attachEvent :
element.attachEvent("évènement", fonction);
A partir de ces informations, ce serait bien qu'on créer notre propre fonction addEvent, qui combinerait les 2, comme ça on aurait pas à écrire en double le gestionnaire.
Je vous aide un peu : pour la première fonction standard, je n'entrerai pas dans les détails, mais sachez qu'il faut mieux mettre true pour le 3ième argument.
Allez, au boulot :)
...
function addEvent(obj, event, fct) {
if (obj.attachEvent) //Est-ce IE ?
obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
else
obj.addEventListener(event, fct, true);
}
En plus, vous pourrez utiliser cette fonction pour virer tous les attributs onclick, etc... de vos pages XHTML :)
Je vous mets un exemple d'utilisation de notre fonction :
function al1() { alert(1); } //Trois fonctions quelconques
function al2() { alert(2); }
function al3() { alert(3); }
addEvent(window , "load", al1); //On les lance toutes les deux au chargement de la page
addEvent(window , "load", al2);
addEvent(document.getElementById('truc'), "click", al3); //Un clic sur "truc" déclenche la fonction al3()
Et maintenant, notre fonction lancer(), devenue riquiqui :
function lancer(fct) {
addEvent(window, "load", fct);
}
Merci à Thunderseb pour l'idée de la gestion des événements ;)
Voilà, un petit script bien pratique qui vous servira sûrement.
En espérant vous avoir été utile, merci d'avoir lu ce tuto :)