gérer un click [Résolu]

[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 :

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 :

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 :

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 :

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 :

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

[mekal]

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]

Envoyé par mekal

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

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

Code :

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 :

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();};
	}
}