11548 sujets

JavaScript, DOM et API Web HTML5

Salut,

Ce post a pour but de définir une méthode optimisée de gestion d'évènements similaires dans une page.
J'ai sur une page une dizaine d'éléments similaires (des boutons) qui déclenchent tous le même comportement dans leur contexte (ils provoquent l'apparition du div situé juste après eux dans le code).

Vaut-il mieux utiliser le handler click - et donc avoir un gestionnaire d'évènement par bouton, mais qui stoppe le event bubbling sur place - , ou utiliser un delegate vers le body par exemple - et donc avoir un seul gestionnaire d'évènement, mais avec un event bubbling sur toute la profondeur du DOM - ?

Merci pour vos conseils
Tu parles du point de vue des perfs ?
Je dirais que ça dépend du moteur js, de la profondeur du dom et de l'éventuel framework utilisé.
Depuis la 1.4, le .live() de jquery est bien plus performant que par le passé.

Faut tester.
Oui, du point de vue des perfs.

J'utilise jQuery; pour l'instant les évènements en question sont sur l'élément, avec un ".click(function ...)", et je me demandais si c'était mieux d'utiliser un seul gestionnaire global d'évènement pour ça, étant donné qu'on parle d'une dizaine de boutons provoquant le même comportement.
Le fait de mettre le gestionnaire tout en haut (sur le body probablement) ne va-t-il pas forcer les évènements à faire du bubble tout le long du DOM ? Ou est-ce que ça suit un court-circuit ? Et est-ce performant ?
Je vais voir si je trouve une façon intéressante de tester.

Feel free to debate (on est dredÿ après tout Smiley biggol ).
D'après Zakas, dans 'high performance javascript', il est préférable d'utiliser la délégation que d'attacher un handler à chaque élément.
Mais il s'agit de js brut, et la surcouche de jquery peut altérer cet argument.
Les sélecteurs ont un impact notable sur les perfs.