[addEventListener]Passer des paramètres a la fonction a éxécuter

Version imprimable

17/01/2007, 16h28
Macintoc

[addEventListener]Passer des paramètres a la fonction a éxécuter
Salut !

Un petit soucis pour passer un paramètre.

En gros, j'ai une boucle for qui fait défiler un certain nombre d'éléments auquel je souhaite attacher un évènement. Seulement, j'ai besoin de passer la valeur de l'index courant à la fonction à attacher.

Le code source donne ceci pour l'instant :
Code:

1 2 3 4 for(var index=0;index<6;index++){ tabs.add(document.getElementById('tab'+index)).addEventListener('click', evtFct=function(){tabs.select(index).bind(tabs)}, false); }
Avec cette technique, tabs.select reçoit bien l'index. Le soucis, c'est qu'au moment de déclenché l'évènement, index a la dernière valeur qui lui a été attribué (donc 6, ce qui est parfaitement logique et normal).

Sachant que je peux pas passer directement de paramètre a la fonction que j'attache a l'évènement, comment passer indirectement la valeur de l'index a select() au moment où ce dernier est attaché ?

Je préfèrerais éviter de créer spécialement un membre selectindex a mon objet tabs.

Je sais pas si je suis très clair :?
17/01/2007, 16h37
willoi

En fait j ai pas bien compris ce que tu veux ,

mais j avais ete confronte a des problemes d evenements il y a quelques temps et je m etais depatouille avec ce lien :

http://www.quirksmode.org/js/events_order.html

Si tu peux expliquer un peu mieux stp
17/01/2007, 17h02
Macintoc
Pour simplifier l'écriture a l'extrême, je voudrais faire ça :
Code:

1 2 3 4 for(var index=0;index<6;index++){ tabs.item[index].addEventListener('click', tabs.select(index), false); }
Sauf que ce cas là renvoi une erreur vu qu'on peut pas directement passer d'argument a une fonction qu'on attache a un évènement.

Pour contrer cette limitation, j'utilise habituellement cette syntaxe :
Code:

1 2 .addEventListener('click', evtFct=function(){tabs.select(index)}, false);
Cette méthode fonctionne, tabs.select reçoit bien index.

Sauf que dans mon cas, la valeur de index change a chaque itération de la boucle. Donc quand evtFct est exécuté, index a la dernière valeur qui lui a été attribué par la boucle, soit 6, et non la valeur qu'il avait au moment où j'ai attaché la fonction à l'évènement (respectivement 0, 1, 2, 3, 4, 5).
Hors ce qui m'intéresse, c'est ce deuxième cas.

C'est moins obscure ?
18/01/2007, 18h15
Macintoc

A priori, mon explication est toujours aussi obscure. Mais je sais pas vraiment comment être plus clair :(
19/01/2007, 10h28
willoi

apparament c est resolu avec cet instructiion :

Code:

objet.setAttribute('OnClick', 'mafonction('+variable+')');
19/01/2007, 15h17
Macintoc

C'est un piège. Cette solution a un gros défaut, elle écrase les autres évènements posé sur la balise :(

(question bonus, y a pas d'accès au prototype sur les objets DOM ?)
19/01/2007, 15h26
SpaceFrog

Code:

objet.onclick+=function(){mafonction(variable)};
19/01/2007, 15h48
Macintoc

SpaceFrog>Marche pas non plus, y a toujours une fermeture lexicale sur 'variable' :(

Si j'arrive a accéder au prototype des objets DOM, je penses que je vais commencer a redéfinir le DOM pour l'arranger a ma sauce :aie:

Un truc que j avais fait il ya quelque temps peut etre ca peut aider , je creer des evenements dans des objets, du coup avec this tu peux recuperer (en quelque sorte) des parametres,
c est un peu long, c est en partie en espagnol, si t as besoin tu demandes,
c est avec attachEvent (internet Explorer) mais la problematique est la meme (voire pire)

Code:

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
 
/* CALENDARIO STYLES   */
CalendarioStyle=function(){
  this.dias=null;
  this.diaselected=null;
  this.tabledias=null;
  this.meselt=null; 
  this.img=null;
  this.container_style=null;
  this.inputstyle=null;
}
/****** CLASE CALENDARIOCONFIG ************************/
CalendarioConfig=function(){
  this.monthlist=new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"
    , "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
  this.daylist=new Array("Lu","Ma","Mi","Ju","Vi","Sa","Do");
}
 
/****** CLASE CALENDARIOID *********************/
CalendarioId=function(){       /* para tener una tabla de los calendarios */ 
  this.elts=0;        /* porque la mierda de InternetExplorer perde la referencia a su objeto !!!!! */
  this.Tobj=new Array();
  this.Tid=new Array();
}
CalendarioId.prototype.addObject=function(obj,id){
  this.Tobj.push(obj);
  this.Tid.push(id);
  this.elts=this.elts + new Number(1);
}
CalendarioId.prototype.getObject=function(id){
  for (i=0;i<this.Tobj.length;i++){
    if (this.Tid[i]==id){
      return this.Tobj[i];
    }
  }
}
var tcal=new CalendarioId();    /* objeto que tiene la lista completa de los calendarios */
 
/******************************** CLASE Calendario *************************************/
Calendario=function(id,container){
  this.H24 = 24*60*60*1000; // un dia en milisegundos
  this.id=id;
  this.container=document.getElementById(container);    // contenedor donde se ponen todos los elementos
  this.contcal=null;                            // contender del calendario mismo
  this.dt=new Date();                           //fecha del dia por defecto
  this.mes=this.dt.getMonth();                  //mes
  this.ano=this.dt.getYear();                   //año
  this.tb = null;                               //tabla de los dias
  this.lnmes=null;                              //linea de los meses
  this.calcl=null;                      //estilo por defecto
  this.setDefaultStyle();               //puesto en calendar.css
  this.input=null;
  this.init();
}
Calendario.prototype.init=function(){
  this.input=document.createElement("INPUT");
  this.input.id="cal_" + tcal.elts;
  tcal.addObject(this,this.input.id);
  this.input.size="12";
  this.input.value=this.date_format();
  this.input.className=this.calcl.inputstyle;
  this.container.appendChild(this.input);
 
  //imagen para desplegar el calendario
  img=document.createElement("IMG");
  img.src= "js/calendar.jpg";
  img.id="img_" + tcal.elts;
  tcal.addObject(this,img.id);
  img.attachEvent("onclick",this.display);
  this.container.appendChild(img);
 
  // definicion del calendario mismo
  this.contcal=document.createElement("DIV");
  this.contcal.style.display="none";
  this.contcal.className=this.calcl.container_style;
  tbmes=document.createElement("TABLE");        //tabla de mes y ano
  tbmes.width="100%";
  this.contcal.appendChild(tbmes);
  this.lnmes=tbmes.insertRow();                //linea del mes--> para acceder a los meses siguinte y antes
  this.lnmes.align="center";    
  this.tb=document.createElement("TABLE");      //table de los dias
  this.tb.width="100%";
  this.tb.className=this.calcl.tabledias;
  this.contcal.appendChild(this.tb);
  this.container.appendChild(this.contcal);
}
 
 
Calendario.prototype.display=function(){                //display the calendar
  obj=tcal.getObject(this.event.srcElement.id);
  obj.contcal.style.display="inline";
  obj.generate_month();
}
 
Calendario.prototype.generate_month=function(ln){               //print the  selected month
  while (this.lnmes.cells.length>0){
    this.lnmes.deleteCell();
  }
 
  img = document.createElement("IMG"); //previous month
  img.src="js/mes_previous.gif";
  img.id="img_" + tcal.elts;
  tcal.addObject(this,img.id);
  img.attachEvent("onclick",this.previousMonth);
  img.className=this.calcl.img;
  col=this.lnmes.insertCell();
  col.width="15%";
  col.className=this.calcl.meselt;
  col.appendChild(img);
 
  col=this.lnmes.insertCell();                                  // actual month
  col.className=this.calcl.meselt;
  col.width="70%";
  col.appendChild(document.createTextNode((new CalendarioConfig()).monthlist[this.mes] + " " + this.ano));
 
  img = document.createElement("IMG"); //next month
  img.src="js/mes_next.gif";
  img.id="img_" + tcal.elts;
  tcal.addObject(this,img.id);
  img.attachEvent("onclick",this.nextMonth);
  img.className=this.calcl.img;
  col=this.lnmes.insertCell();
  col.className=this.calcl.meselt;
  col.width="15%";
  col.appendChild(img);
  this.generate_days();
}
Calendario.prototype.previousMonth=function(){  //pasando al mes anterior
  obj=tcal.getObject(this.event.srcElement.id);
  if (obj.mes==0){
    obj.ano=obj.ano-1;
    obj.mes=11;
  }else{
    obj.mes=obj.mes-1;
  }
  obj.generate_month();
}
Calendario.prototype.nextMonth=function(){  //pasando al mes siguiente
  obj=tcal.getObject(this.event.srcElement.id);
  if (obj.mes==11){
    obj.ano=obj.ano+1;
    obj.mes=0;
  }else{
    obj.mes=obj.mes+1;
  }
  obj.generate_month();
}
Calendario.prototype.generate_days=function(){          // generate all days of the month selected
  var id_sem=(new Date(this.ano,this.mes, 1)).getDay()-1;
  if (id_sem==-1){id_sem=6;}
 
  while (this.tb.rows.length>0){
    this.tb.deleteRow();
  }
  ln=this.tb.insertRow();
  ln.align="center";
  for(i=0;i<(new CalendarioConfig()).daylist.length;i++){
    col=ln.insertCell();
    col.width="14%";
    col.appendChild(document.createTextNode((new CalendarioConfig()).daylist[i]));
  }
  ln=this.tb.insertRow();
  ln.align="center";
  for (i=1;i<=id_sem;i++){
    col=ln.insertCell();
    col.className=this.calcl.tabledias;
    col.width="14%";
  }
  for (i=1;i<=this.getNbDias();i++){
    if (id_sem==7){
      ln=this.tb.insertRow();
      ln.align="center";
      id_sem=0;
    }
    lnk=document.createElement("A");         //previous month
    lnk.href = "javascript:" + this.id + ".daySelected(" + i + ")";
    lnk.appendChild(document.createTextNode(i));
    col=ln.insertCell();
    if (this.dt.getDate()==i && this.mes==this.dt.getMonth() && this.ano==this.dt.getYear()){
      lnk.className=this.calcl.diaselected;
      col.className=this.calcl.diaselected;
    }else{
      lnk.className=this.calcl.dias;
      col.className=this.calcl.dias;
    }
    col.appendChild(lnk);
    col.width="14%";
    id_sem=id_sem+1;
  }
}
Calendario.prototype.setDate=function(dt){      //para predefinir una fecha
  this.dt=dt;
  this.mes=this.dt.getMonth();
  this.ano=this.dt.getYear();
  this.input.value=this.date_format();
}
Calendario.prototype.daySelected=function(dia){
  this.dt=new Date(this.ano,this.mes,dia);
  this.input.value=this.date_format();
  this.contcal.style.display="none";
}
Calendario.prototype.format=function(n){
   return (n < 10) ? "0" + n : n;
}
 
Calendario.prototype.date_format=function(){
  with(this){
    return format(dt.getDate())+ "/" + format((dt.getMonth() +1)) + "/" + dt.getYear();
  }
}
Calendario.prototype.getNbDias=function(){              // devuelve el numero de dias en un mes
  var dt_tmp=new Date(this.ano,this.mes, 1);
  if (dt_tmp.getMonth() < 11){
    dt_tmp.setMonth(dt_tmp.getMonth() + 1);
  }
  else{
    dt_tmp.setMonth(0);
    dt_tmp.setFullYear(dt_tmp.getFullYear() + 1);
  }
  dt_tmp.setDate(1);
  dt_tmp.setTime(dt_tmp.getTime() - this.H24);
  return dt_tmp.getDate();
}
Calendario.prototype.setDefaultStyle=function(){          //inicializando los estilos por defecto
  this.calcl=new CalendarioStyle();
  with(this.calcl){
    /* container */
    container_style="CalendarioContainer";
 
    /* input style*/
    inputstyle="CalendarTextField";
 
    /*tabla mes*/
    meselt="CalendarioMes"; 
    img="CalendarioImg"
 
    /* tabla dias */
    tabledias="CalendarioTableDias";
    dias="CalendarioDias";
    diaselected="CalendarioDiaSelected"
  }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
function popme(myurl){
window.open(myurl)
}
 
</script>
	</head>
 
	<body onload="addOnclick('btn',function(){alert('ajout')})">
		<a href="http://www.google.fr" id="btn" onclick="this.href='#';popme('http://www.google.com');return false;" ;>Button</a>
	</body>
 
</html>

22/01/2007, 11h42
Macintoc
Finalement, je passes par l'objet event.target :
Code:

1 2 3 for(var t=0;t<6;t++){ tabs.add(document.getElementById('tab'+t), !t).addEventListener('click', function(evt){tabs.select(evt.target)}, false); }
Même si j'aurais préféré passer l'index plutôt que l'objet même.

C'est regrettable également qu'on ne puisse pas modifier les objets DOM :(

Je laisse le topic ouvert 2-3 jours, voir s'il n'y a pas de meilleurs solutions qui permettent de passer des arguments a une fonction lors de son attachement a un évènement sans passer par une fermeture lexicale.
22/01/2007, 17h40
eXiaNazaire

Merci Frog pour ce lien ... Je n'avais pas penser au += ...

Y'a t'il une autre méthode avec le attachEvent ?

Et sinon pour répondre à l'auteur de ce post, je pense que tu aurais pu trouver une solution avec la fonction eval de javascript
22/01/2007, 17h48
eXiaNazaire

Beh en fait, ca ne fonctionne pas le coup du "+=" pour concatener le nouvelle evenement aux anciens !!

Une idée ?
22/01/2007, 18h08
Macintoc

Eval n'est pas une solution :P
D'ailleurs, c'est une fonction qui n'aurait jamais du être implémenté 8-)

Salut,

J'ai du mal à comprendre ton code.
C'est quoi "tabs" ?
De plus, "tabs.add()" et "tabs.select()" : ce sont des fonctions que tu as créé ou des méthodes DOM de l'objet tabs ?
Ton bout de code me semble trop proche de ton code réél pour qu'on puisse bien en comprendre la signification.

Tu pourrais appliquer ta solution "event.target" (avec le EventListener) à un exemple plus simple comme celui que j'avais mis sur mon topic ?

Je te le remet ici pour que tu ne le cherches pas
Code:

1 2 3 4 5 6 7 8 9 10 for(i = 0; i < 5; i++) { //On crée un objet de type bouton Item = document.createElement("input"); Item.setAttribute(...); // type, value, etc Item.onclick = function() { Test("toto" + i); }; Parent.appenChild(Item); }
Merci

;)

tabs est un objet instancié a partir de la classe Tabs que j'ai créé. Tabs.add et Tabs.select sont deux de ses méthodes.

Pour son code source, le voici :
Code:

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 function Tabs(){ this._selected=null; his._tabs=Array(); } Tabs.prototype.add=function(tab, selected){ this._tabs.push(tab); if(selected){ this.select(tab); this._selected=tab; } return tab; } Tabs.prototype.select=function(target){ if(this._selected) this._selected.className=''; target.className='tabSelect'; this._selected=target; return target; } Tabs.prototype.selected=function(){ return this._selected; } Tabs.prototype.item=function(index){ return this._tabs[index]; } Tabs.prototype.count=function(){ return this._count; }
Et la fonction d'initialisation :
Code:

1 2 3 4 5 6 7 8 function init(){ var tabs=new Tabs(); for(var t=0;t<6;t++){ tabs.add(document.getElementById('tab'+t), !t).addEventListener('click', evtFct=function(evt){tabs.select(evt.target)}, false); } }
Dans ton cas, tu ne peux pas utiliser event.target puisque ton argument porte sur une chaine de caractère, alors que mon cas portait sur l'index d'un htmlLiElement. Il suffisait alors que je remplaces cet index par l'htmlLiElement en question grâce a event.target, ce qui m'a obligé a gérer la sélection de tab par objet htmlLiElement au lieu de la gérer par index (concrètement, Tabs._selected devient un htmlLiElement de la tab sélectionnée au lieu d'être l'index du htmlLiElement a l'intèrieur du tableau Tabs._tabs).
Je ne sais pas si je suis très clair :-/