Jquery VS onclick

javascript

Cet article explique pourquoi j’ai pris la décision de modifier mes habitudes de développement concernant la gestion des événements click avec Javascript (boutons et liens a).

Avant l’arrivée de Jquery, pour intercepter un click sur un lien (<a..) ou un boutton (<button…) on avait pour habitude d’utiliser le tag : onclick= »maFonctionJS() ».

Avec Jquery cela est devenu plus simple car il suffisait d’affecter un ID ou une Class à notre élément HTML (a, button) et ensuite d’utiliser la syntaxe Jquery pour ‘lier’ notre fonction :

// avec un id
$("#idDubouton").click( function() { maFonctionJs(); }) ;
// avec une classe
$(".nomDeClass".click( function() { maFonctionJs(); }) ;

L’avantage d’une classe est qu’elle peut être affectée à plusieurs éléments, contrairement à un id qui doit être unique.

Concernant les boutons cela fonctionnent bien, par contre pour les liens (a) il faut désactiver le fonctionnement par défaut qui fait que le navigateur après exécution du code JS va essayer d’aller sur l’url contenu dans le href. Pour cela la fonction JS doit intégrer avec le code suivant :

## avec un id
$("#idDuTagA").click( function(e) {
  e.preventDefault(); // désactive le lien pour le navigateur
}

Même s’il est possible avec Jquery d’intercepter un click sur tous types de tag (TD, DIV, H1…) ce n’est pas recommandé car cela pose des problèmes de compatibilité entre les navigateurs. Il est préconisé d’utiliser uniquement des a (ou des buttons) pour les événements click.

En résumé mon (ancien) workflow pour gérer les clicks sur une page HTML :

  • Utilisation d’un A ou Button, avec un id ou une class a minima
  • Créer la fonction JS associée
  • Attacher l’évènement click, via l’id ou la class avec Jquery
  • Désactiver (si élément A) le lien dans la fonction JS

Au fil du temps, de la taille des projets je suis arrivé au constat suivant :

Lorsque l’on utilise uniquement Jquery pour gérer les clicks il devient difficile (sur de gros projets) de retrouver rapidement le code associé à tel ou tel bouton ou lien a. Dans le code HTML il n’y a que l’id (ou la class). Il faut dans un premier temps retrouver le code Jquery qui attache le click, puis ensuite le code de la fonction.

Sur mes deux derniers projets, j’ai pris le parti de revenir à l’utilisation du onclick dans le code HTML.
Avec plusieurs avantages (de mon point de vue) :

  • Réduction du code JS, on appelle directement la fonction avec onclick= »maFonctionJs(); »
  • Si les fonctions JS sont bien organisées on retrouve rapidement la fonction associée.

Un autre point qu’il est difficile de mesurer, c’est la rapidité. Lorsque vous utilisez Jquery chaque fois que vous exécutez le code $(« xxx »).click(…) Jquery va balayer toute la page HTML à la recherche des tags qui correspondent au filtre (id ou class). Si votre page contient de nombreux button ou tag ce traitement peut être ‘long’.

En spécifiant directement le code onclick dans le code HTML. C’est le navigateur qui au moment de l’analyse de la page va enregistrer la fonction associée au click. Un seul balayage est nécessaire. Encore une fois je ne suis pas en mesure de quantifier cela mais je suis sûr à 99% que c’est le cas.

Dernier point lié au précédent, c’est l’occupation mémoire. Dans le cas d’utilisation des onclick (dans le code HTML) il est probable que moins de mémoire sera utilisée qu’avec Jquery, mais à confirmer également.

Alors il faut bien sûr nuancer ces cas de figures. Si votre page contient 3 boutons le gain sera imperceptible. Pour ma part je développe actuellement une application en mode SPA (Single Page Application). Cette application fonctionne pour 80% en javascript et donc tout est chargé dans une seule page HTML !! et la il y a beaucoup (vraiment beaucoup) de boutons à gérer…

Le principal inconvénient de cette solution  c’est qu’il faut ajouter le code onclick= ».. » dans tous les éléments. Avec Jquery via une classe il est possible d’associer une fonction à plusieurs éléments, bien-sûr il faut ajouter la classe à tous les éléments. Mais si la fonction change la mise à jour (avec Jquery) sera plus rapide, car un seul endroit à modifier.

Il est aujourd’hui difficile (voir impossible) de se passer de Jquery sur un projet Web. Néanmoins il faut garder à l’esprit que même si Jquery est présent, parfois il y a plus simple voir plus rapide en utilisant simplement les fonctions standards…

2 commentaire(s)

  1. inconnu says:

    avec des onclick dan le html, on ne peut pas écrire aussi propre
    car on ne peut pas mettre :

    (function(){ //fonction anonyme rendant local, tous les scripts et variables ci-dessous
    //mettre ici tout le script de ma page
    }())

  2. Auguste says:

    Oui c’est exact.

    Mais en ce qui me concerne je préfère que le code JS soit dans des fichiers .js et pas directement dans le code HTML. Dans ce cas je place juste l’appel de la fonction JS dans le ‘onclick’ et tout le code function() {} est dans un fichier .js. Pour maintenir le code je trouve cela plus pratique.

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.