Plusieurs addEventListener, seul le dernier fonctionne

**speedev** · 14/11/2008, 12h09

Bonjour,

Je rencontre un problème que j'ai déjà résolu mais impossible de retrouver la solution.

Le code génère plusieurs boutons radios depuis une boucle For() et affecte à chacun un événement de souris ("click" en l'occurrence).

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
// on se trouve dans une boucle For()
// des IDs sur chaque boutons radios sont bien créés (vérifié)
// et enfin une affectation d'événement simple ci-dessous
 
document.getElementById("radio_"+id).valeur = valeur;
document.getElementById("radio_"+id).addEventListener("click", function () {
      alert(this.valeur);
}, false);
 
// Fin de la boucle

Mon problème :
L'alert javascript ne fonctionne que sur le dernier bouton radio créé.
Il y a donc un écrasement des événements similaires précédemment créés (vu sur https://developer.mozilla.org/fr/DOM...dEventListener) mais je ne trouve plus comment y remédier.

Merci de votre aide

**marcha** · 14/11/2008, 16h29

Salut,

Tu pourrai donner un peu plus de code, parce que cela semble correct ton extrait.

**le_chomeur** · 14/11/2008, 16h35

si tu es dans une boucle pourquoi ne pas faire directement :

Code :

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

document.getElementById("radio_"+id).onclick = function(){alert(this.valeur);};

**speedev** · 14/11/2008, 16h36

Parce que ça non plus ça ne marche pas, j'ai testé DOM0, DOM1 et DOM2

**le_chomeur** · 14/11/2008, 16h38

mouai donc le problème vient d'ailleurs

montre nous un peu plus ton code

**speedev** · 14/11/2008, 17h01

Je vous ai réécris le code en grande partie avec des copier-coller, je ne garanti pas les fautes de frappes ni l'indentation du code...mais ça devrait vous éclairer un peu.

En gros, je récupère un flux XML stocké dans la variable "t_con".
Je parcours les noeuds un peu sauvagement (il y a surement plus optimisé comme technique) mais je suis obligé de faire vite et avec mes connaissances surement limitées...

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
for(i=0;i<t_con[0].childNodes.length;i++)
{	
	var code	="";
	var valeur	="";
	var node = t_con[0].childNodes[i];
	if (node.nodeType == 1)
	{
		if(node.firstChild)
		{
			switch(node.nodeName)
			{
				case "PARENT" :
					// init de variables
					for(j=0;j<node.childNodes.length;j++)
					{
						var enfant = node.childNodes[j];
						if (enfant.nodeType == 1)
						{
							if(enfant.firstChild)
							{
								switch(enfant.nodeName)
								{
									case "CODE" : code = enfant.firstChild.nodeValue;
									break;
									case "VALEUR" : valeur = enfant.firstChild.nodeValue;
									break;
									//etc...
								}
							}
						}			
					}			
					document.getElementById("radio_"+code).valeur = valeur;
					addEvent("radio_"+code,"click", function () {
						alert('ok');	
						document.getElementById("conteneur_de_valeur").innerHTML = this.valeur;
						// Je stocke la variable "valeur" dans un div lorsque je clique sur le bouton radio correspondant à son code associé
					}, false);
				break;
			}
		}
	}								
}

**speedev** · 14/11/2008, 17h07

Excusez...voici la fonction addEvent...

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
function addEvent(objid,ev,fnc,capt){
	var obj = document.getElementById(objid);
	if(obj.addEventListener)
	{
		obj.addEventListener(ev, fnc, capt);
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent(
			'on'+ev,
			function()
			{
				return fnc.apply(obj, arguments);
			}
		);
	}
	else
	{
		if(!obj['on'+ev])
		{
			obj['on'+ev] = fnc;
		}
		else
		{	
			var oldfnc = obj['on'+ev];
			obj['on'+ev] = function(){
				oldfnc();
				fnc();
			}
		}
	}
	return true;
}

**le_chomeur** · 14/11/2008, 17h13

trève de plaisanterie

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="mesCheck">
	<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>
<script type="text/javascript">
	var listCheck = document.getElementById('mesCheck').getElementsByTagName('input');
	for(var i = 0  , l = listCheck.length ; i <l  ; i++){
		if(listCheck[i].type == 'checkbox'){
			listCheck[i].valeur = "je vaux : " + i ;
			listCheck[i].onclick = function(){alert(this.valeur)};
		}
	}
</script>

fais un copier coller de ce code dans une page

tu seras en bonne voie pour comprendre ton problème

**speedev** · 14/11/2008, 17h15

Je comprends bien ton code mais il ne me sert à rien.
J'emploie cette méthode sur d'autres dév mais ce n'est pas le cas ici.

**le_chomeur** · 14/11/2008, 17h19

c'est un exemple pour te montrer que l'erreur ne vient pas de l'assignation de l'évènement mais du code plus haut ...

1 chose a vérifier : que ton objet existe bien :

Code :

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

1
2
3
4
function addEvent(objid,ev,fnc,capt){
	var obj = document.getElementById(objid);
        alert(obj);
...

si oui , le problème viendra de la méthode addevent

**speedev** · 14/11/2008, 17h20

J'ai bien vérifié l'existence des objets.
J'ai fais plusieurs debugs....

**speedev** · 14/11/2008, 17h23

Je pense plutôt à l'utilisation de addEventListener qui a ses spécificités.
Je sais qu'il écrase les doublons sur des événements de target et type identiques.

Seulement je ne sais plus à quel niveau il faut intervenir pour que l'assignation de l'événement comme tu dis ne se fasse pas sur la dernière itération uniquement mais sur chacune.

**marcha** · 14/11/2008, 17h30

Observes-tu le même problème sur IE et FireFox ?

Vois-tu qq chose dans la console de FireBug ?

**speedev** · 14/11/2008, 17h32

Tout à fait, le pb est identique sur Internet explorer et je présume sur les autres navigateurs.

Concernant firebug je ne sais pas où regarder pour vérifier les événements.

**marcha** · 14/11/2008, 17h40

Et tes boutons radio dans tout ça ? tu les crées comment ?

**speedev** · 14/11/2008, 18h32

Je génère les boutons radios avec innerHTML.
J'ai vérifié le code source dans le navigateur, les radios ont bien tous des "id" différents nommés avec les "code" respectifs du flux XML.
Ils ont tous un "name" identique et des valeurs différentes.

De ce côté pas de pb...

**marcha** · 14/11/2008, 22h35

Est-ce que tu peux poster un code minimal qui pose le problème et
que l'on puisse tester ?

**speedev** · 17/11/2008, 09h57

Ok, en 2 fichiers...

Code pour test.xml:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<?xml version="1.0" encoding="utf-8"?>
<LISTE>
	<OBJET>
		<CODE>1</CODE>
		<VALEUR>TOTO</VALEUR>
	</OBJET>
	<OBJET>
		<CODE>2</CODE>
		<VALEUR>TITI</VALEUR>
	</OBJET>
</LISTE>

Code pour test.html :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<html>
<head>
<script>
function loadXML(){
	if (document.implementation && document.implementation.createDocument) {
		var xmldoc=document.implementation.createDocument("","",null);
		xmldoc.load("/test.xml");
	} else if (window.ActiveXObject) {
		var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
		xmldoc.load("/test.xml");
	}
	test_xml(xmldoc);
}
 
function test_xml(obj)
{
	var liste = document.getElementById("conteneur");
	liste.innerHTML = "";
	var t_con = obj.getElementsByTagName('LISTE');
	alert("debut parcours");
	if (t_con.length>0)
	{
		for(i=0;i<t_con[0].childNodes.length;i++)
		{	
 
			var code				= "";
			var valeur				= "";		
			var node = t_con[0].childNodes[i];
			if (node.nodeType == 1)
			{
				if(node.firstChild)
				{
					switch(node.nodeName)
					{
						case "OBJET" :
									alert("1 OBJET rencontré...création de son radio");
									for(j=0;j<node.childNodes.length;j++)
									{
										var enfant = node.childNodes[j];
										if (enfant.nodeType == 1)
										{
											if(enfant.firstChild)
											{
												switch(enfant.nodeName)
												{
													case "CODE" :			code		 		= enfant.firstChild.nodeValue;break;
													case "VALEUR" : 		valeur		 		= enfant.firstChild.nodeValue;break;
												}
											}
										}			
									}
									liste.innerHTML+="<input type=\"radio\" name=\"chp_radio\" id=\"chp_num_"+code+"\" value=\""+code+"\" /> : "+code+" ("+valeur+")<br />";
									document.getElementById("chp_num_"+code).valeur = valeur;
									addEvent("chp_num_"+code,"click", function () {
										alert("passage dans événement OK...exécution...");
										document.getElementById("valeur").innerHTML = "pause...";
										document.getElementById("valeur").innerHTML = this.valeur;
									}, false);
 
									alert("Le bouton radio se voit affecter la valeur : "+document.getElementById("chp_num_"+code).value+"\n"+"Le bouton radio se voit affecter un événement \"onclick\" devant afficher la valeur : "+valeur);
 
						break;
					}
				}
			}								
		}	
	}
}
 
function addEvent(objid,ev,fnc,capt){
	alert("Ajout d'un événement sur "+objid);
	var obj = document.getElementById(objid);
	if(obj.addEventListener)
	{
		obj.addEventListener(ev, fnc, capt);
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent(
			'on'+ev,
			function()
			{
				return fnc.apply(obj, arguments);
			}
		);
	}
	else
	{
		if(!obj['on'+ev])
		{
			obj['on'+ev] = fnc;
		}
		else
		{	
			var oldfnc = obj['on'+ev];
			obj['on'+ev] = function(){
				oldfnc();
				fnc();
			}
		}
	}
	return true;
}
</script>
</head>
<body>
	<div id="conteneur"></div>
	valeur : <span id="valeur"></span>
	<script>loadXML();</script>
</body>
</html>

Il suffit d'exécuter test.html sur racine (ou changer les chemins du fichier xml dans la fonction LoadXML).

J'ai testé ce code sur Mozilla (3.0.3) uniquement.

Le problème rencontré est bien présent avec code : seul le dernier bouton radio créé dispose d'un événement onclick.

J'ai toujours l'impression que les affectations d'événements s'auto-écrase nt jusqu'au dernier mais je ne trouve pas d'explications.

Merci...

**speedev** · 17/11/2008, 10h06

J'ai rajouté des alertes pour debug

**speedev** · 18/11/2008, 11h08

Encore cette matinée sur le problème.
Je ne comprends pas du tout où ça bloque, tous mes IDs existent quand il le faut mais le addEventListener n'est toujours affecté que sur le dernier élément radio créé.

J'ai testé qlq closures javascript mais elles n'arrangent rien.

Je reste à votre écoute si vous pouvez m'aider, en attendant je passe à autre chose, ça fait 2 jours perdus déjà...

Plusieurs addEventListener, seul le dernier fonctionne

JavaScript

Discussions similaires

Partager

Partager