Appeler plusieurs fonctions JavaScript dans l'événement Onclick

  2. HowTo
  3. JavaScript Howtos
  4. Appeler plusieurs fonctions JavaScript …
Nithin Krishnan 12 octobre 2023
JavaScript JavaScript Event
  1. Passer des fonctions en tant que valeurs au paramètre onclick
  2. Utilisation de JavaScript discret
  3. Utilisation du && et du || Les opérateurs
Appeler plusieurs fonctions JavaScript dans l'événement Onclick

Nous connaissons très bien l’événement onclick en javascript, qui déclenche une certaine fonction passée en valeur à l’attribut onclick. L’événement Document Object Model (DOM) de HTML est pris en charge pour presque tous les éléments HTML sauf quelques-uns comme le <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ou <title>. Il est couramment utilisé sur les balises html comme <div>, <button>, <li>, <span>, <a> etc. Mais comment appelons-nous plus d’une fonction sur un clic d’un <div>, <li> ou d’un <bouton>. Voici quelques façons de le faire.

  • Passage des fonctions en valeurs au paramètre onclick
  • Utilisation de JavaScript discret
  • Utilisation du && et du || les opérateurs

Passer des fonctions en tant que valeurs au paramètre onclick

La manière la plus courante d’utiliser l’attribut onclick est d’attribuer la fonction sous forme de valeurs à l’attribut onclick. Nous l’écrivons généralement dans le code GUI à l’intérieur d’une balise HTML. Pour passer plusieurs fonctions en tant que valeurs, listez-les séparées par des points-virgules dans l’attribut onclick de cette balise. La syntaxe pour cela est la suivante.

onclick = 'functionA(); functionB();'

Les deux fonctions seront exécutées l’une après l’autre. Par exemple, si nous utilisons le code suivant avec les fonctions functionA() et functionB(), le résultat sera l’exécution séquentielle des deux fonctions dans l’ordre mentionné dans les valeurs.

<div id="output" onclick="functionA(); functionB();"></div>

function functionA() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' Mars is a planet');
  }
}
function functionB() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' The sky is blue');
  }
}

Sortie :

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Remarques

  • L’exécution de plusieurs fonctions avec onclick est prise en charge sur tous les navigateurs Web et pour la plupart des éléments HTML. C’est une méthode soignée et concise d’appel de fonctions multiples.
  • L’exécution de la fonction est séquentielle. Par conséquent, vous pouvez planifier l’ordre dans lequel les appels de méthode doivent être effectués en répertoriant les fonctions en conséquence.
  • Au lieu d’utiliser des points-virgules après un nom de fonction, nous pouvons également les séparer par une virgule. Cela signifie que onclick = "function1(), function2()" est également une syntaxe valide.
  • Il y a un inconvénient à utiliser plusieurs fonctions passées dans un événement onclick. Si l’une des méthodes passées en paramètre échoue en raison d’une exception, cela interrompt toute la chaîne. Et toutes les fonctions qui le suivent ne seront pas exécutées.
  • L’utilisation de onclick dans les balises rend le code lisible. Nous ne manipulons pas le DOM n’est pas manipulé. Cela signifie que nous spécifions les fonctions de manière statique dans le HTML. Par conséquent, nous n’ajoutons aucune fonction à l’événement onclick de l’élément DOM au moment de l’exécution. Le navigateur analyse le code HTML et peut associer les événements de clic lors de la phase d’analyse.

Utilisation de JavaScript discret

Une autre façon de passer des fonctions dans le onclick en JavaScript est d’ajouter des écouteurs onclick dans le code JavaScript. Dans cette méthode, nous trouvons l’élément cible et lions notre fonction à l’événement onclick de cet élément. L’approche discrète est une façon de programmer où nous gardons les événements javascript dans le code js, et le HTML n’inclut que la page statique (Refer here pour plus d’informations). Voici la manière discrète d’appeler plusieurs fonctions sur l’événement de clic.

let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);

Production:

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Remarques

  • Les fonctions sont exécutées séquentiellement mais ne sont pas dépendantes. Ainsi, si une fonction échoue à s’exécuter, le reste des fonctions ne sont pas bloquées contrairement au cas dans onclick="functionA(), functionB()".
  • Nous pouvons ajouter plusieurs fonctions avec cette méthode. Pour supprimer dynamiquement une fonction déjà ajoutée, nous devons utiliser le removeEventListener. La syntaxe est la suivante.
element.removeEventListener('click', alertFirst);
  • Il sera difficile de déboguer la fonctionnalité car HTML n’affichera pas les fonctions liées au onclick de l’élément HTML. Les méthodes sont mappées à l’événement onclick au moment de l’exécution lors de la compilation du code javascript.
  • Cette méthode d’ajout de onclick à l’exécution donne la flexibilité d’exécuter intelligemment des fonctions basées sur la logique métier, car l’association se fait à la phase de compilation en exécution.

Utilisation du && et du || Les opérateurs

On peut inclure plusieurs fonctions séparées par le && et || les opérateurs. Les fonctions doivent avoir un type de retour booléen. Habituellement, nous utilisons cette approche lorsqu’il est nécessaire de décider de certaines conditions, puis d’exécuter la fonction prévue. Si ces conditions nécessitent des vérifications logiques complexes ou longues, il est préférable de les créer en tant que fonctions et de les conserver dans le code js pour rendre le HTML léger et lisible. Le code suivant détaille l’utilisation.

<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>

function isValidPage(pageNumber) {
  let pageNum = parseInt(pageNumber);
  let maxPagesCount = 10;
  let isValidPageNumber = false;
  if (!isNaN(pageNum)) {
    if (pageNum > 1 && pageNum < maxPagesCount) {
      isValidPageNumber = true;
    }
  }
  return isValidPageNumber;
}

function fetchPageDetails(pageNumber) {
  // Call Backend service to get the detils
}

Dans le code ci-dessus, la fonction fetchPageDetails() ne sera appelée qu’après que la fonction isValidPage() renvoie true. En substance, l’opérateur && s’assure que la fonction fetchPageDetails() n’est exécutée que si le pagenumber est valide.

Remarques

  • Dans cette méthode, l’exécution des fonctions est séquentielle. Il suit la logique sous forme de code en utilisant le && et le || les opérateurs. Si une méthode échoue en raison d’exceptions, elle n’exécute pas les fonctions restantes.
  • Nous pouvons utiliser cette méthode dans les cas où nous avons des fonctions avec des types de retour booléens ou des types qui correspondent à l’opérateur logique utilisé dans le code.
  • Comme nous spécifions les fonctions dans l’attribut click de l’élément HTML, cette méthode est une manière statique de déclarer plusieurs fonctions. Nous ne faisons aucune association d’exécution.

Article connexe - JavaScript Event