Discussion :

[fagadoo]

Bonjour,
Découvrant JavaScript, je bute sur la manière d'organiser mon code.

J'ai un simple bouton dans un formulaire ayant un ID: id="bouton1"

Si j'écris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
var bouton= document.getElementById('bouton1');
 
	function voir(){
	alert("toto");
	}
 
bouton.addEventListener("click", voir, false);
</script>

Tout fonctionne correctement, ma boite de dialogue apparait bien lorsque je clique sur mon bouton.

Par contre, si je tente d'utiliser une fonction avec un argument:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
	var bouton= document.getElementById('butht');
 
function voir(arg){
	alert(arg);
	}
 
bouton.addEventListener("click", voir("toto"), false);
</script>

Le bouton fonctionne toujours mais la fonction est également appelée à l'ouverture de la page...
Quelqu'un saurait il me dire pourquoi ?
Merci de votre aide
Yvan

[Eric2a]

Salut,

Il faut placer l'appel à la fonction voir() dans une fonction dite "anonyme".

D'autre part, il faut utiliser la méthode attachEvent pour assurer la compatibilité avec IE.
La fonction addEventSimple est déstinée à prendre ce cas en compte.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function addEventSimple(obj,evt,fn){
	if (obj.addEventListener)
		obj.addEventListener(evt,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent('on'+evt,fn);
}
 
function voir(arg){
	alert(arg);
}
 
var bouton=document.getElementById('butht');
addEventSimple(
	bouton,
	'click',
	function(){
		voir("toto");
	}
);

[fagadoo]

Merci,

Cela fonctionne parfaitement bien.
J'ai cependant un peu de mal à tout comprendre.

Imaginons que l'on ne souhaite pas tenir compte des spécificités d'IE (utilisation du site limitée à quelques utilisateurs sans IE dans mon cas), est il alors possible d'écrire ces quelques lignes plus simplement.

Je me replonge dans les fonctions anonymes de suite et me documente sur addEventSimple...

Merci beaucoup

[fagadoo]

Documenté sur addEventListener et les fonctions anonymes, je commence à comprendre...

[Eric2a]

Sous IE, avec le code ci-dessous...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var bouton=document.getElementById('bouton');
try{
	bouton.addEventListener('click',function(){voir("toto");},false);
}
catch(e){
	alert(e);
}

Nous obtenons le message d'alerte...

TypeError : Ce objet ne gère pas cette propriété ou cette méthode

D'où l'interêt d'avoir la fonction addEventSimple qui utilise la méthode attachEvent si la méthode addEventListener n'est pas gérée.

[Willpower]

pourquoi se faire chier avec des "attachEvent" et des "eventListener" quand on peut simplement utiliser l'attribut "onclick" qui est compatible avec tous les navigateurs et plus simple à écrire ?

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('bouton1').onclick = function(){voir("toto");};

[Invité]

pourquoi se faire chier avec des "attachEvent" et des "eventListener" quand on peut simplement utiliser l'attribut "onclick"

pour pouvoir faire des "dettachEvent" et des "removeEventListener" et pouvoir conserver le reste des evenement et aussi eviter le parasitage d'autres code dans une page comme onload mais il est vrais qu'une gestion des evenement a la dom 1 est tres efficace dans beaucoup de cas et sans soucis de compatibilite

[Eric2a]

pour pouvoir faire des "dettachEvent" et des "removeEventListener"...

Et pour ces méthodes, nous faisons comme pour la fonction addEventSimple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function removeEventSimple(obj,evt,fn){
	if (obj.removeEventListener)
		obj.removeEventListener(evt,fn,false);
	else if (obj.detachEvent)
		obj.detachEvent('on'+evt,fn);
}

Et puisqu'on y est, pour window.onload...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addLoadListener(func){
	if(window.addEventListener)
		window.addEventListener('load',func,false);
	else if(document.addEventListener)
		document.addEventListener('load',func,false);
	else if(window.attachEvent)
		window.attachEvent('onload',func);
	else if(typeof window.onload!='function')
		window.onload=func;
	else{
		var oldonload=window.onload;
		window.onload=function(){oldonload();func();};
	}
}