Écouter des événements globaux en JavaScript

Les événements globaux en JavaScript permettent d'interagir avec des actions qui ne sont pas liées à un élément spécifique, mais à l'ensemble du document ou de la fenêtre. On les utilise souvent pour détecter des actions de l'utilisateur comme le défilement de la page, le redimensionnement de la fenêtre, ou encore l'activité du clavier en dehors des champs de saisie.

Les principaux événements globaux

• 🖱️ scroll : déclenché lorsque l'utilisateur fait défiler la page.
• 📐 resize : déclenché lors du redimensionnement de la fenêtre.
• ⌨️ keydown, keyup : déclenchés lorsque l'utilisateur appuie ou relâche une touche du clavier.
• 🖱️ mousemove, mousedown, mouseup : pour suivre les mouvements et clics de la souris.
• 😶‍🌫️ visibilitychange : déclenché lorsque l'onglet du navigateur devient visible ou caché.

---

Ajouter un écouteur d'événement global

En JavaScript, on utilise souvent window ou document pour "attacher" des écouteurs à ces événements globaux.

Voici un exemple simple pour détecter le défilement de la page:

window.addEventListener("scroll", () => {
    console.log("La page est en train d'être défilée")
})

Un autre exemple avec le redimensionnement de la fenêtre:

window.addEventListener("resize", () => {
    console.log(`Nouvelle dimension: ${window.innerWidth}x${window.innerHeight}`)
})

On a dans ces deux exemples attaché à window un écouteur d'événement ("scroll", "resize") avec la méthode addEventListener().

---

Retirer un écouteur d'événement global

lorsqu'ils ne sont plus nécessaires il est important de retirer les écouteurs d'événements afin d'éviter que le navigateur ne conserve des références inutiles et garantir une meilleure performance.

Voici comment détacher un écouteur d'événement:

function handleScroll() {
    console.log("La page est en train d'être défilée")
}

window.addEventListener("scroll", handleScroll);

// Suppression de l'écouteur
window.removeEventListener("scroll", handleScroll);

⚠️ la fonction passée en argument à removeEventListener() doit être exactement la même que celle utilisée lors de l'ajout de l'écouteur.

---

Gérer les événements globaux en React ⚛️

En React, il est recommandé d'ajouter et de retirer les écouteurs d'événements globaux dans useEffect pour s'assurer qu'ils sont bien gérés lors du cycle de vie du composant.

Par exemple avec l'événement resize cela donnerait:

import { useEffect } from "react"

function App() {
    useEffect(() => {
        function handleResize() {
            console.log(`Nouvelle taille : ${window.innerWidth}x${window.innerHeight}`)
        }

        window.addEventListener("resize", handleResize)

        return () => {
            window.removeEventListener("resize", handleResize)
        }
    }, [])

    return <div>Réduisez la fenêtre pour voir l'effet</div>
}

L'écouteur est ajouté au montage du composant puis supprimé une fois le composant démonté, évitant ainsi des comportements inattendus et rendant l'application plus fluide.

Et Voilà, vous savez tout sur la gestion des événements ! Ce qu'il faut retenir ? Manipuler avec soin les écouteurs (ajout et retrait quand cela est vraiment nécessaire) garde une application fluide et réactive.