L'objet événement synthétique de React

Pourquoi une abstraction pour les événements ?

Lorsque vous attachez un gestionnaire d'événements en React (par exemple, avec `onClick={handleClick}`), la fonction `handleClick` reçoit automatiquement un argument. Cet argument n'est pas exactement l'objet événement natif fourni par le navigateur (`MouseEvent`, `KeyboardEvent`, etc.). A la place, React passe un objet événement synthétique (SyntheticEvent).

Pourquoi React introduit-il cette couche d'abstraction ? La raison principale est la cohérence et la compatibilité multi-navigateurs. Les implémentations des événements DOM natifs peuvent parfois varier légèrement d'un navigateur à l'autre (Chrome, Firefox, Safari, Edge...). L'objet événement synthétique de React enveloppe l'événement natif et expose une API unifiée qui fonctionne de manière identique sur tous les navigateurs supportés par React. Cela simplifie grandement le développement, car vous n'avez pas à vous soucier des bizarreries spécifiques à chaque navigateur.

De plus, le système d'événements synthétiques de React utilise une technique appelée délégation d'événements (event delegation) et un pool d'objets événements pour des raisons de performance. Plutôt que d'attacher un écouteur pour chaque élément avec un gestionnaire, React attache souvent un seul écouteur au niveau racine du document et détermine quel composant doit gérer l'événement lorsque celui-ci remonte (bubbling). Les objets SyntheticEvent sont réutilisés pour minimiser l'allocation mémoire.

Interface et API de SyntheticEvent

L'objet SyntheticEvent expose une interface très similaire à celle de l'objet événement DOM natif standard. Vous retrouverez la plupart des propriétés et méthodes que vous utilisez habituellement :

• event.preventDefault() : Empêche le comportement par défaut du navigateur associé à l'événement (par exemple, suivre un lien pour un clic sur ``, soumettre un formulaire pour `onSubmit`, cocher une case pour un clic sur un label associé). Essentiel pour les soumissions de formulaire en SPA.
• event.stopPropagation() : Arrête la propagation (bubbling) de l'événement vers les éléments parents dans l'arbre DOM/React. Utile pour éviter que des gestionnaires d'événements sur des éléments parents ne soient déclenchés involontairement.
• event.target : Référence l'élément DOM sur lequel l'événement a été déclenché initialement (par exemple, l'élément `` ou ``). C'est souvent ce que vous utiliserez pour accéder à des valeurs (`event.target.value`) ou des attributs.
• event.currentTarget : Référence l'élément DOM auquel l'écouteur d'événement est actuellement attaché (utile si vous utilisez la délégation d'événements).
• event.type : Une chaîne indiquant le type d'événement (ex: `'click'`, `'change'`, `'submit'`).
• Propriétés spécifiques à l'événement : D'autres propriétés spécifiques au type d'événement sont également disponibles, comme `event.key`, `event.keyCode` pour les événements clavier, `event.clientX`, `event.clientY` pour les événements souris, etc.

Exemple d'utilisation :

function FormulaireAvance() {
  const handleSubmit = (event) => {
    // 1. Empêcher la soumission HTML par défaut
    event.preventDefault(); 
    console.log('Soumission interceptée !');
    
    // 2. Accéder aux données du formulaire via event.target
    const formData = new FormData(event.target); // event.target est l'élément 

    const nom = formData.get('nom');
    console.log('Nom soumis :', nom);
    // ... envoyer les données ...
  };

  const handleClickDiv = (event) => {
    console.log('Clic sur la DIV (parent)');
  };

  const handleClickButton = (event) => {
    // 3. Arrêter la propagation pour que handleClickDiv ne soit pas appelé
    event.stopPropagation(); 
    console.log('Clic sur le BOUTON (enfant)');
    alert('Bouton cliqué, div non notifiée.');
  };

  return (
    

      Cliquez n'importe où dans la div.
      
        
        Soumettre
        
          Clic (Stop Propagation)
        
      
    
  );
}

Pooling et accès asynchrone (Comportement historique)

Important : Historiquement (avant React 17), les objets SyntheticEvent étaient mis en commun (pooled) pour des raisons de performance. Cela signifiait que les propriétés de l'objet événement étaient nullifiées après la fin de l'exécution du gestionnaire d'événements. Si vous aviez besoin d'accéder à l'événement de manière asynchrone (par exemple, dans un `setTimeout` ou après un `await`), vous deviez appeler `event.persist()` pour retirer l'événement du pool et conserver ses propriétés.

Depuis React 17, le pooling des événements a été supprimé. Cela signifie que vous pouvez maintenant accéder aux propriétés de l'événement quand vous le souhaitez, même de manière asynchrone, sans avoir besoin d'appeler `event.persist()`. Cela simplifie la gestion des événements asynchrones. Cependant, il est bon de connaître le comportement historique si vous travaillez avec des versions antérieures de React.

Accéder à l'événement natif

Si, pour une raison très spécifique, vous avez besoin d'accéder à l'objet événement natif du navigateur sous-jacent, il est disponible via la propriété `event.nativeEvent`.

const handleNative = (event) => {
  console.log('Evénement synthétique:', event);
  console.log('Evénement natif:', event.nativeEvent);
  // Accéder à une propriété spécifique de l'événement natif si nécessaire
  // const timestampNatif = event.nativeEvent.timeStamp;
};

Cependant, cela est rarement nécessaire car l'API de SyntheticEvent couvre la grande majorité des cas d'utilisation de manière multi-navigateur.

Conclusion : Une API unifiée et fiable

L'objet événement synthétique de React est une abstraction précieuse qui simplifie la gestion des événements DOM en fournissant une API cohérente et fiable sur tous les navigateurs. En comprenant ses méthodes clés comme `preventDefault()` et `stopPropagation()` et ses propriétés comme `target`, vous pouvez gérer efficacement les interactions utilisateur.

Bien que le pooling d'événements ait été supprimé dans les versions récentes de React, connaître son existence historique peut être utile. Dans la plupart des cas, l'API fournie par SyntheticEvent est tout ce dont vous avez besoin pour répondre aux actions des utilisateurs dans vos composants React.