Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Exécuter plusieurs fonctions au chargement d'une page

Avatar
Auteur : raphamil
Créé : le 14/04/2008 02:12:34
Modifié : le 18/04/2008 16:23:05
Noter et commenter ce tutoriel
Imprimer ce tutoriel
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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.
Sommaire du chapitre :

Comment faire les choses proprement ?

Comme expliqué en introduction, j'ai conseillé d'utiliser le gestionnaire d'événements traditionnel, au lieu de celui en-ligne.
Gné o_O

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 :

Code : HTML
1
<body onload="scope(); load_events(); date()">


Avec le gestionnaire d'événements traditionnel, on met à la fin du fichier javascript cette ligne :

Code : JavaScript
1
2
3
//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à...

Un problème bien ennuyeux

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.

La solution n°1 : l'array de fonctions

Comment va-t-on faire pour régler ce problème ?

Je vous donne le raisonnement :


En théorie, ça marche, mais dans la pratique ? A vos claviers :-°

...

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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

La solution n°2 : "l'écouteur" d'événements

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 :

Code : JavaScript
1
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 :

Code : JavaScript
1
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 :)

...


Code : JavaScript
1
2
3
4
5
6
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 :

Code : JavaScript
1
2
3
4
5
6
7
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 :

Code : JavaScript
1
2
3
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 :)
Auteur : raphamil
Noter et commenter ce tutoriel
Imprimer ce tutoriel

Nombre de connectés 242 Zér0s connectés | Requêtes SQL 7 requêtes | Temps de génération de la page 0.0869s (0.0722s)

Changer de design - Revue de presse - En savoir plus - Plan du site
Nous contacter - Mentions légales - Publicité
Politique d'accessibilité - Fil RSS - XHTML 1.0 - CSS 2.0

Y'a plus rien à lire, faut remonter maintenant !