Attribut onclick vs méthode jQuery click()

Lorsqu'on désire exécuter du code JavaScript lors d'un clic sur un élément HTML comme par exemple un bouton, deux approches possibles :

  • Ajouter un attribut onclick dans la balise HTML (méthode à éviter).

    Ex :

    HTML

    <input type="button" id="recalculer" value="Recalculer" onclick="recalculer();" />

  • Utiliser la méthode click() de jQuery (méthode à préférer).

    Ex :

    HTML

    <input type="button" id="recalculer" value="Recalculer" />

    jQuery

    $("#recalculer").click(recalculer);

▼Publicité

Les deux approches se ressemblent énormément. Cependant, jQuery offre l'avantage de mieux séparer le code HTML du code JavaScript puisqu'on n'aura pas à imbriquer un appel JavaScript à l'intérieur de la balise.

De plus, grâce aux sélecteurs jQuery, il est possible d'assigner d'un seul coup un traitement JavaScript à un groupe d'éléments HTML. Par exemple, une seule ligne de code pourrait faire en sorte que tous les liens qui ont la classe defilerHaut exécutent  une fonction JavaScript qui ramène la page en haut de l'écran.

Ex :

jQuery

$("a.defilerHaut").click(hautEcran);

Autre avantage : avec jQuery, il est possible d'assigner une fonction anonyme, ce qui simplifie l'écriture lorsque la fonction n'est réutilisée dans aucun autre contexte.

Toujours avec l'exemple des liens qui ramènent la page en haut de l'écran, on pourrait écrire la fonction anonyme comme suit :

Ex :

jQuery

$("a.defilerHaut").click(function () {

    $("html, body").animate({ scrollTop: 0 }, "slow");

    return false;

});

Finalement, si vous prenez l'habitude de travailler avec la méthode click(), vous pourrez, lorsque le besoin se fera sentir, utiliser des fonctionnalités intéressantes qu'il serait difficile d'implanter en utilisant l'attribut onclick : assignation d'une méthode à un élément créé dynamiquement, assigner une seconde fonction JavaScript, réagir à un click sur un élément HTML autre qu'un bouton, etc.

Pour toutes ces raisons, nous tenterons d'éviter l'utilisation de l'attribut onclick et préférerons l'utilisation de la méthode click() de jQuery.

N'oubliez pas, cependant, d'écrire les appels à la méthode click() dans $(function () { ... });

Pour plus d'information

« .click() ». jQuery. https://api.jquery.com/click/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories