11548 sujets

JavaScript, DOM et API Web HTML5

Salut !

Pour séparer le javascript du HTML, j'utilise addEventListener pour poser des évènements. Le soucis, c'est que cette méthode ne permet pas de passer de paramètres à la fonction qu'on attache à l'évènement, à moins de passer par une fonction anonyme. Mais on se heurte alors aux closures et au moment où l'évènement se déclenche, l'index passé a toujours la dernière valeur attribuée par la boucle.

Il me semblait avoir déjà trouvé, par hasard, un tuto expliquant comment passer un index de boucle à une fonction anonyme attachée a un évènement sans avoir de closure mais j'arrive pas à remettre la main dessus (si quelqu'un l'a déjà croisé, je suis preneur de l'adresse, doit y avoir plein d'autres trucs intéressants sur ce site).

Pour l'instant, mon code ressemble à ceci :
var lines=document.getElementById('virtualRootConstantes').getElementByTagName('table')[0].getElementsByTagName('tr');
for(var t=1; t<lines.length;t++){		
		var inputs=lines[t].getElementsByTagName('input');
		lines[t].getElementsByClassName('save').addEventListener('click', function(){save(inputs)}, false);
	}

Donc toujours pas débarrassé du closure, inputs pointant sur la dernière ligne de la table et non sur la ligne courante, mais, au moins, j'ai pas de dépassement d'index.

Merci de votre aide ^^
Modifié par MacIntoc (14 Feb 2007 - 20:21)
Hello et bienvenue sur Alsacréations,

Il faut que tu passes par une fonction supplémentaire pour créer une nouvelle portée (scope). Sans closure, je ne pense pas que ce soit possible, à moins d'utiliser this ou currentTarget, qui ne sont pas supportés par IE.
function createEvtHandler(inputs) {
  return function() {save(inputs);};
}

var lines = document.getElementById('virtualRootConstantes').getElementByTagName('table')[0].getElementsByTagName('tr');
for(var t=1; t<lines.length;t++){
  var inputs=lines[t].getElementsByTagName('input');
  lines[t].getElementsByClassName('save').addEventListener('click', createEvtHandler(inputs), false);
}
P.S. : sais tu que addEventListener n'est pas supporté par IE ?
Tu es sur de cette syntaxe :
.addEventListener('click', createEvtHandler(inputs), false)

Ce serait pas plutôt sans le passage d'argument ?

Je n'arrives pas à voir a quel moment la closure est interrompue ?

Sinon, oui, je le sais. Pour l'instant, je ne me soucis pas de la compatibilité direct avec IE, tant qu'il y a un équivalent (attachEvent dans ce cas).
MacIntoc a écrit :
Tu es sur de cette syntaxe :
.addEventListener('click', createEvtHandler(inputs), false)

Ce serait pas plutôt sans le passage d'argument ?
Oui, il s'agit juste d'un appel à la fonction. Il n'y a pas de closure à ce niveau-là. Smiley smile C'est la fonction createEvtHandler qui s'en charge.
MacIntoc a écrit :
Sinon, oui, je le sais. Pour l'instant, je ne me soucis pas de la compatibilité direct avec IE, tant qu'il y a un équivalent (attachEvent dans ce cas).
Fais quand même attention, car le comportement de attachEvent n'est pas exactement le même (entre autres pour le mot-clé this, ce qui est très gênant d'ailleurs).
A oui, exact... étant donnée qu'il y a les parenthèses, js appelle la fonction. La fonction renvoi alors une fonction anonyme qui, elle, est attaché a l'évènement.
Maintenant que j'ai la solution sous les yeux, elle parait si évidente que j'en aurais presque honte de ne pas l'avoir trouvée seul Smiley lol

Concernant la compatibilité, je fais quand même un minimum attention, étant donnée que ce que je suis en train de développé sera exclusivement utilisé sur IE7. Mais durant la phase de développement, pour simplifier les algorithmes, je me cantonne a Firefox, qui disposent d'outils de déboguage beaucoup plus puissants.

Merci pour tous Smiley jap
Modifié par MacIntoc (14 Feb 2007 - 12:31)
Presque all done, manque un caractère par manque de place dans le titre Smiley ohwell
Modifié par MacIntoc (14 Feb 2007 - 20:22)