Boostez les performances de jQuery avec .on() et l’event delegation

Boostez les performances de jQuery avec .on() et l’event delegation

Publié le par dans Développement, Javascript et jQuery | 2 commentaires »

La version 1.7 de jQuery inaugure une nouvelle gestion des événements, que l'on peut désormais déclarer grâce à la fonction on(). Cette nouvelle structure est utilisable de façon classique de la même façon que bind(), ou bien avec un argument supplémentaire à la façon de delegate(). Son atout est sa polyvalence et sa simplicité de mise en place, mais pas seulement : elle permet d'accélérer considérablement la vitesse d'exécution de vos scripts (jusqu'à 100 fois). Un atout de taille pour offrir une expérience utilisateur de qualité au survol de vos menus et autres zones dynamiques !

Pour faire simple, l'event delegation avec on() permet de d'associer un événement à un élément parent de l'arborescence dom au lieu de l'associer individuellement à chacun des éléments concernés. Pour une liste, l'événement sera ainsi associé à la balise <ul>, et fonctionnera pour les <li> enfants. Le gros avantage de cette solution est qu'elle permet d'associer des événements à les éléments insérés dynamiquement dans le dom à l'aide de fonctions comme append() ou via des appels en Ajax. Je vous propose en exemple une version actualisée de mon astuce "Étendre la portée d’un lien avec Jquery" :

<script>
$(function(){
$("#liste_ul_contenante").on("mouseover","li",function(){
$(this).css("cursor","pointer").find("a").css("text-decoration","underline");
}).on("mouseout","li",function(){
$(this).find("a").css("text-decoration","none");
}).on("click","li",function(e){
document.location.href = $(this).find("a").attr("href");
e.preventDefault();
});
});
</script>

Utilisant personnellement ce type de fonctions dans mes développements, j'ai constaté un net gain en termes de fluidité lors du passage à cette nouvelle structure. Voilà un beau cadeau de la part des équipes de développement de jQuery ;)



2 commentaires sur “Boostez les performances de jQuery avec .on() et l’event delegation”

  1. 1

    En mode raleur du matin, j’aurais pas dit non pour une identation dans la partie de code. LOL !!
    S.

  2. 2

    Je ne suis pas adepte de l’indentation, j’utilise un éditeur qui affiche les repères des accolades à gauche, je trouve ça suffisant… après chacun a ses habitudes ;)

Publiez un commentaire