Gérer plusieurs actions déclenchées par un seul clic est une tâche courante en développement web. Cet article explore les meilleures pratiques pour exécuter plusieurs fonctions JavaScript en réponse à un événement onclick, en mettant l’accent sur la clarté et la maintenabilité du code.
Table des matières
- Utiliser une fonction englobante
- Utiliser les écouteurs d’événements (JavaScript non intrusif)
- Comprendre les opérateurs
&&et||(Avancé et moins recommandé)
Utiliser une fonction englobante
Cette approche favorise un code propre et organisé en encapsulant plusieurs appels de fonctions au sein d’une seule fonction. Elle est particulièrement bénéfique lorsqu’il s’agit de nombreuses actions ou d’une logique complexe.
function function1() {
console.log("Fonction 1 exécutée");
// ... votre code ...
}
function function2() {
console.log("Fonction 2 exécutée");
// ... votre code ...
}
function fonctionCombinee() {
function1();
function2();
}
// HTML
<button onclick="fonctionCombinee()">Cliquez ici</button>
fonctionCombinee() sert d’enveloppe, garantissant que function1() et function2() s’exécutent séquentiellement. Cela améliore la lisibilité et simplifie la maintenance, notamment pour les projets plus importants.
Utiliser les écouteurs d’événements (JavaScript non intrusif)
Le JavaScript non intrusif est un principe clé pour séparer JavaScript du HTML, améliorant l’organisation du code, la maintenabilité et l’accessibilité. Les écouteurs d’événements offrent un moyen puissant d’y parvenir.
function function1() {
console.log("Fonction 1 exécutée");
// ... votre code ...
}
function function2() {
console.log("Fonction 2 exécutée");
// ... votre code ...
}
const monBouton = document.getElementById("monBouton");
monBouton.addEventListener("click", function1);
monBouton.addEventListener("click", function2);
// HTML
<button id="monBouton">Cliquez ici</button>
Cette méthode permet d’attacher plusieurs fonctions au même événement. L’ordre d’attachement des écouteurs détermine l’ordre d’exécution (function1 avant function2 dans cet exemple). Il s’agit de l’approche préférée pour les projets plus importants en raison de son organisation et de sa maintenabilité supérieures.
Comprendre les opérateurs && et || (Avancé et moins recommandé)
Bien que possible, l’utilisation des opérateurs && (ET) et || (OU) dans l’attribut onclick pour chaîner les appels de fonctions est généralement déconseillée en raison de la réduction de la lisibilité et du comportement inattendu potentiel.
&& (ET) : Toutes les fonctions ne s’exécutent que si toutes les fonctions précédentes renvoient une valeur vraie.
<button onclick="function1() && function2()">Cliquez ici</button>
|| (OU) : L’exécution s’arrête à la première fonction renvoyant une valeur vraie.
<button onclick="function1() || function2()">Cliquez ici</button>
Cette approche couple étroitement JavaScript et HTML, ce qui nuit à la lisibilité et peut entraîner des résultats imprévisibles si les fonctions renvoient des valeurs fausses (0, false, null, undefined, ""). Il est préférable de l’éviter, sauf dans les scénarios les plus simples et uniquement lorsque vous comprenez parfaitement ses implications.
Conclusion : Les méthodes de fonction englobante et d’écouteurs d’événements sont fortement recommandées pour gérer plusieurs fonctions dans les événements onclick. Elles privilégient la clarté du code, la maintenabilité et une séparation claire des préoccupations, conduisant à des applications web plus robustes et fiables.