La gestion des événements est un élément très important quand l'on travaille avec javascript. Ces événements vont vous permettre d'interagir avec les visiteurs et de répondre à leurs actions.

addEventListener()

La fonction addEventListener, comme son nom l'indique, vous permet d'écouter un élément et de réagir si tel ou tel événement est déclenché à partir de lui. La syntaxe est la suivante, par exemple:

button.addEventListener(click, handleClick);
// Structure: target.addEventListener(type, listener)

La fonction de rappel (callback function) s'exécute chaque fois que l'événement est détecté.

const maDiv = document.querySelector("div#container");

maDiv.addEventListener("click", handleClick);

function handleClick() {
    console.log("Click!");
}

Par défaut, la fonction callback embarque avec elle l'événement sous forme d'objet. Après, libre à vous de l'utiliser ou pas. Souvent, par convention, on le nomme event ou e. Vous pouvez alors faire quelque chose avec, à l'intérieur de votre fonction.

const maDiv = document.querySelector("div#container");

maDiv.addEventListener("click", handleClick);

function handleClick(event) {
    console.log(event); // Jetons un oeil à cet objet d'événement..
}

Ou encore..

let monBouton = document.querySelector("#monBouton");
monBouton.addEventListener("click", fermerFenetre);

function fermerFenetre() {
    window.close();
}

si votre fenêtre n'a pas été ouverte à l'origine sur votre page, vous risquez de croiser ceci. (pour info)→ Ouvrir le lien

Ici aussi, des bibliothèques viendront nous simplifier encore la tâche. Par exemple vue.js et son gestionnaire d'événements:

<button @click="maFonction">
    Clique-moi!
</button>

Supprimer un écouteur d'événement

• element.removeEventListener

Des écouteurs directement dans le HTML

Vous croiserez parfois des écouteurs directement dans le HTML, avec la syntaxe suivante. Cette façon de faire est à éviter (vous ne saurez pas, entre autres, récupérer l'objet d'événement) et provoque pas mal de bugs. De la même façon qu'on évite de définir des styles dans les balises html, on évite également de faire ce type de mélange avec javascript. Mais comme ça vous saurez au moins à quoi cela ressemble..

<button id="monBouton" onClick="handleClick()">Clique-moi!</button>

Les types d'événements

Note

Le contenu ci-dessous nous a été gracieusement offert par ChatGPT (à tester donc 😉 )

La méthode addEventListener() en JavaScript est utilisée pour attacher un gestionnaire d'événements à un élément spécifique. Il existe de nombreux types d'événements que vous pouvez écouter. Voici une liste non exhaustive des événements couramment utilisés :

Événements de la souris :

• click : L'utilisateur clique sur un élément.
• dblclick : Double-clic sur un élément.
• mousedown : Un bouton de la souris est enfoncé sur un élément.
• mouseup : Un bouton de la souris est relâché au-dessus d'un élément.
• mousemove : La souris est déplacée sur un élément.
• mouseover : La souris entre sur un élément.
• mouseout : La souris quitte un élément.

Événements du clavier :

• keydown : Une touche est enfoncée.
• keyup : Une touche est relâchée.
• keypress : Une touche est enfoncée puis relâchée.

Événements de formulaire :

• submit : Un formulaire est soumis.
• change : La valeur d'un élément de formulaire change.
• input : L'utilisateur saisit des données dans un champ de saisie.
• focus : Un élément reçoit le focus.
• blur : Un élément perd le focus.

Événements tactiles (pour les appareils tactiles) :

• touchstart : Un doigt est posé sur un élément tactile.
• touchmove : Un doigt se déplace sur l'écran tactile.
• touchend : Un doigt est retiré de l'écran tactile.

Événements de l'interface utilisateur :

• resize : La taille de la fenêtre du navigateur est modifiée.
• scroll : L'utilisateur fait défiler la page.

Événements de média :

• play : La lecture d'un média commence.
• pause : La lecture d'un média est mise en pause.
• ended : La lecture d'un média arrive à sa fin.

Événements divers :

• load : Un élément est entièrement chargé (par exemple, une image ou une page web).
• unload : Une page web est en train d'être quittée.
• error : Une erreur s'est produite.

Événements de mutation (DOM) :

• DOMContentLoaded : Le DOM est entièrement chargé et analysé.
• mutation : Des modifications sont apportées au DOM.

Événements de drag-and-drop :

• drag : Un élément est déplacé.
• drop : Un élément est déposé sur une cible de dépôt.

Ces événements représentent les types les plus courants, mais il existe d'autres événements plus spécifiques et certains événements personnalisés définis par des bibliothèques ou des frameworks.

preventDefault()

Un certain nombre d'éléments, comme les liens ou un bouton reset d'un formulaire, sont déjà attachés par défaut à des écouteurs d'événements, par le navigateur. Lorsque vous cliquez sur un lien, il vous emmène quelque part. Quelque chose se passe.

On peut, pour des raison x ou y, vouloir se prémunir contre ces comportement par défaut. C'est là qu'intervient la fonction preventDefault(). On peut l'utiliser de la façon suivante:

let mesLiens = document.querySelectorAll('a');
console.log(mesLiens);

mesLiens.forEach(lien => lien.addEventListener("click", handleClick));

function handleClick(event) {
    event.preventDefault();
}