Appel d'une fonction JavaScript à l'aide de l'événement onclick

1. Appel de la fonction JavaScript à l’aide du gestionnaire d’événements onclick
2. Attacher une fonction JavaScript à un élément HTML à l’aide de JavaScript pur
3. Définition d’une fonction sur le gestionnaire d’événements onclick dans l’élément HTML
4. Appel d’une fonction JavaScript à l’aide de addEventListener

Même si nous concevons du contenu HTML statique pour une page Web, nous pouvons vouloir le rendre interactif pour l’utilisateur. Les éléments HTML, par défaut, sont stupides. La balise <a> est interactive pour l’utilisateur mais est principalement utilisée pour charger un chemin spécifique. Les éléments HTML tels que div peuvent être rendus interactifs par l’utilisateur en leur ajoutant un gestionnaire d’événements. Nous discuterons d’un tel gestionnaire d’événements appelé gestionnaire d’événements onclick. Il existe plusieurs manières de l’ajouter à un élément HTML.

Appel de la fonction JavaScript à l’aide du gestionnaire d’événements onclick

Nous pouvons lier une fonction JavaScript à un div en utilisant le gestionnaire d’événements onclick dans le code HTML ou en attachant le gestionnaire d’événements en JavaScript. Référons-nous au code suivant dans lequel nous attachons le gestionnaire d’événement à un élément div.

<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

L’élément div n’accepte aucun événement de clic par défaut. Dans le code, on lie une fonction JavaScript changeMyColor() au gestionnaire d’événement onclick du div. Il rend maintenant le div cliquable. Même si nous définissons un gestionnaire d’événement onclick sur un div, l’utilisateur ne saura toujours pas si le div accepte un clic ou non à moins qu’il ne clique. C’est une bonne UI/UX d’avoir le curseur marqué différemment une fois que l’utilisateur survole notre cible div. Pour cela, nous attribuons un style en ligne style="cursor: pointer;" à l’élément div. Une fois que l’utilisateur survole le div, le curseur affichera un signe de la main indiquant qu’il est cliquable.

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

Dans le code JavaScript, nous définissons la fonction changeMyColor() passée à l’événement onclick du div. La fonction prend l’id du div comme paramètre. Il sélectionne l’élément à l’aide du document.getElementById(id) et change la couleur de police de l’élément en bleu à l’aide de la ligne el.style.color = "blue";. Par conséquent, nous avons attribué une fonction JavaScript au div et l’avons rendu cliquable.

Attacher une fonction JavaScript à un élément HTML à l’aide de JavaScript pur

Dans la dernière approche, nous avons déclaré le gestionnaire d’événement onclick dans le HTML. Il existe un moyen de garder le HTML propre et d’attacher une fonction JavaScript au div ou à l’élément HTML correspondant sans spécifier de gestionnaire d’événement onclick dans le HTML. Ici, nous attribuons l’événement click en JavaScript plutôt qu’en HTML. Par conséquent, cette approche est purement basée sur JavaScript et maintient le HTML propre. Un tel style de programmation est appelé JavaScript discret. Référez-vous au code suivant pour mieux comprendre le concept.

<div id="interactive-div" style="cursor: pointer;">Click me</div>

window.onload =
    function() {
  var el = document.getElementById('interactive-div');
  el.onclick = changeMyColor;
}

function changeMyColor() {
  var el = document.getElementById('interactive-div');
  el.style.color = 'blue';
}

En référence au code ci-dessus, nous avons conservé le code HTML similaire à l’exemple de code précédent. Nous n’avons pas ajouté de gestionnaire d’événement onclick dans le code HTML. Au lieu de cela, nous avons défini le gestionnaire d’événements onclick en JavaScript et attaché la même fonction changeMyColor dans le code JavaScript. Il y a quelques choses à noter ici :

• Nous attachons l’écouteur d’événement onclick à l’intérieur du window.onload. Si nous n’utilisons pas la méthode window.onload, une erreur s’affichera en disant Uncaught TypeError: Cannot set property 'onclick' of null. Cela se produit parce que document.getElementById("interactive-div") essaie de rechercher l’élément avec id interactive-div pendant le chargement du HTML. Comme la balise <script> se trouve dans la section <head>, le code JavaScript exécute le contenu de la balise <script> avant de charger réellement le div qui réside dans la balise <body>. Par conséquent, la fonction getElementById() ne trouvera pas l’élément et renvoie null. Par conséquent, il renvoie une erreur indiquant qu’il ne peut pas définir onclick sur null.
• Un autre point à noter est que nous affectons la fonction au gestionnaire d’événement onclick sans la parenthèse (). Si nous écrivons el.onclick = changeMyColor(); au lieu de el.onclick = changeMyColor;, il exécutera la fonction au chargement du HTML qui n’est pas ce que nous voulons. Par conséquent, nous passons la référence de fonction de changeMyColor au gestionnaire d’événements onclick. Une fois que l’utilisateur a déclenché l’événement onclick en cliquant sur le div, l’appel de fonction changeMyColor se produit. Et le div devient bleu.

Définition d’une fonction sur le gestionnaire d’événements onclick dans l’élément HTML

Il existe plusieurs autres façons d’appeler une fonction JavaScript sur l’événement onclick. Nous pouvons définir la méthode en HTML. Mais ce n’est pas une méthode recommandée car elle rend le HTML désordonné. Référez-vous au code suivant pour mieux comprendre.

<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>

En cliquant sur le div, le code ci-dessus fera apparaître le texte hello world. Ici, nous codons la définition de la fonction en ligne dans le HTML. C’est une méthode anonyme en ligne. Et nous ne pouvons pas utiliser la même fonction ailleurs car elle n’a pas de nom associé. Des définitions de fonctions plus longues seront lourdes et rendront la lisibilité du code médiocre.

Appel d’une fonction JavaScript à l’aide de addEventListener

Une façon d’ajouter le gestionnaire d’événements onclick consistait à utiliser la fonction .onclick(). Il existe une autre méthode plus générique qui peut être utilisée pour ajouter beaucoup plus d’écouteurs d’événements. Pour cela nous utilisons la fonction .addEventListener() de JavaScript. Cette fonction peut être utilisée sur une interface element, document ou encore un objet window. Nous pouvons utiliser la fonction .addEventListener() pour configurer une invocation de méthode lorsqu’un événement particulier est déclenché.

• Paramètres : Il faut quelques paramètres obligatoires : le type d’événement, par exemple click, etc., et la fonction listener. La fonction listener est exécutée lorsque l’événement se déclenche.
• Utilisation : Référez-vous au code suivant.

<div style="cursor: pointer;" id="interactive-div">click me!</div>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('interactive-div')
      .addEventListener('click', function() {
        alert('hello');
      });
});

Ce style de codage est une programmation JavaScript discrète purement basée sur JavaScript. Ici, nous avons ajouté l’écouteur click à l’aide de la fonction .addEventListener() et pour que cela fonctionne, nous devrons nous assurer que le .getElementById("interactive-div") renvoie l’élément. Par conséquent, nous encapsulons le code dans l’écouteur d’événement DOMContentLoaded dans l’interface document. Sinon, le code lancera une erreur indiquant qu’il ne peut pas ajouter event à un objet null.