Seebz.net

Si plusieurs scripts javascript doivent se lancer en utilisant window.onload, seul le dernier se lancera correctement. En effet, cette syntaxe provoque une surchage de l'évènement.

Pourtant, il est possible d'ajouter un gestionnaire d'évènement en évitant la surchage; seul problème, la syntaxe est différente selon le navigateur utilisé.
Qu'à cela ne tienne, notre fonction eventListener() va résoudre ce problème.

Le problème

Imagions le code suivant :

function test1() {
	document.getElementById('test1').innerHTML = "Message écrit par test1()";
}
window.onload = test1;

function test2() {
	document.getElementById('test2').innerHTML = "Message écrit par test2()";
}
window.onload = test2;

Au chargement de la page, seul la fonction test2() se lancera, affichant uniquement 'Message écrit par test2()', ce qui est assez problématique.

La fonction eventListener()

function eventListener(obj, eventName, func) {
	if (obj.addEventListener) {
		obj.addEventListener(eventName, func, false);
	} else if (obj.attachEvent) {
		obj.attachEvent("on"+eventName, func);
	}
}

Explication

La fonction nécessite 3 paramètres.

function eventListener(obj, eventName, func);

• obj
  L'objet sur lequel appliquer le gestionnaire d'évènement. (par exemple window)
• eventName
  Le nom de l'évènement. (par exemple load)
• func
  La fonction a exécuter lors de l'évènement. (sans les parenthèses)

Utilisation

Nous voulons exécuter correctement le code énoncé dans la partie "Le problème", nous aurions quelque chose ressemblant à ceci :

function test1() {
	document.getElementById('test1').innerHTML = "Message écrit par test1()";
}
eventListener(window, 'load', test1);

function test2() {
	document.getElementById('test2').innerHTML = "Message écrit par test2()";
}
eventListener(window, 'load', test2);

Vous pouvez consulter un exemple en suivant ce lien.