[DOM] optimisation d'evenement onclick
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:
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:
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.
