Discussion :

[Zwiter]

Bonjour,

Je m'interroge sur l'optimisation de mon javascript, lorsque je veux detecter des event 'click'. J'utilise prototype.

J'ai une table html de longueur variable, pouvant aller a plus de 1000 lignes.
Un clique sur une ligne permet de realiser une action sur cette ligne. Ici, je ne parlerai que de selection/deselection.

Au debut, j'utilisais un onclick qui appelle la fonction toogleSelect avec en argument this.
Chaque ligne du tableau contient donc le onclick :

Code :

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

1
2
3
<tr onclick="selec(this)">
  <td>blabla</td>
</tr>

Cette methode, lors d'un grand tableau, met pas loin de une seconde a me colorier le tr selectionne (vieux portable mac G4).

J'ai voulu ensuite utiliser les observeur d'evenement :
Je clique, l'evenement declenche la fonction qui recupere le parent de l'element cliquer. Si une balise td a ete clique, alors je recupere le tr qui sera retenu comme selectionner.

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
Event.observe(window, 'load', function() {
	Event.observe(document.body, 'click', function(event) {
		var element = Event.element(event).up();
		if ('TR' == element.tagName)
			 selec(element);
		});
	});
function selec(elem) {
	if (elem.hasClassName('marked')) {
		elem.removeClassName('marked');
		}
	else {
		elem.addClassName('marked');
		}
	}

Qui me fais arriver a peut pret au meme resultat.

Avez vous un avis sur la methode la plus correcte a utiliser ?
Et un conseil d'optimisation pour ameliorer les perfs de mon script ?

Merci pour vos conseils,
Z.

[le_chomeur]

il est étrange qu'avec ce code tu arrives a une seconde , tu n'aurais pas une boucle avant ?
de plus je n'ai pas compris l'intérêt de cette méthode :

Code :

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

1
2
3
4
5
6
7
8
 
if (elem.hasClassName('marked')) {
		elem.removeClassName('marked');
		}
	else {
		elem.addClassName('marked');
		}
	}

tu supprimes une classe pour remettre la même ??


sinon tu peux laisser la méthode : onclick="selec(this)"

et a l'intérieur :

Code :

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

elem.parentNode.addClassName('marked')

??

[Zwiter]

il y a un if, puis un else :
en pseudo code :
Si le tr conteneur contient la classe marked,
alors retirer cette classe
sinon ajouter cette classe
finsi

Le tableau fait 5.8kb. Ya donc pas mal de chose la dedans.

Ce que tu me propose, c'est exactement ce que je fais, en utilisant prototype.
J'avoue ne pas m'etre lancer dans un code pure, sans prototype, car d'une part, ca me permet d'etre compatible avec tous les navigateurs (courant) sans m'en soucier. D'autre part, je ne cherche pas a optimiser mon code, c'est pas mon boulot.
Toutefois, cette page posant pb, je vais peut etre devoir mettre les mains dans le cambouis.

Z.

[Bovino]

Pour ma part, ce qui m'étonne le plus, c'est plutôy :

Code :

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

Event.observe(document.body, 'click', function(event)

toute la page est cliquable... si tu veux juste les tr, fais plutôt :

Code :

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

$$('tr').each(function(elt){elt.observe('click', function(event)...});

[Zwiter]

c'est que toute ma pqge ne contient que un taleau, et un menu tres succint.
Je vais tester l'ajout sur uniquement les tr.

Dans ce cas, il vaut mieux ecrire les onclick physiquement dans chaque balise tr, ou les ajouters grace u DOM de javascript ?

[le_chomeur]

tout dépend de la façon dont tu construits ton tableau.
il est généré par code ( php ? aspx ? ) si oui , ajoute le onclick a la génération, sinon passe par le dom

[Zwiter]

generé par php, chargé via ajax.

Je developpe une application web.