gérer un click

Version imprimable

20/02/2011, 19h56
fagadoo

gérer un click
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

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

20/02/2011, 21h10
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
20/02/2011, 21h29
fagadoo

Documenté sur addEventListener et les fonctions anonymes, je commence à comprendre...:?
20/02/2011, 21h39
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.
20/02/2011, 21h54
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 ? :roll:

Code:

document.getElementById('bouton1').onclick = function(){voir("toto");};
20/02/2011, 23h22
Invité

Citation:

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

Citation:

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