# Événements

## Gestion des événements

React utilise des événements synthétiques (`SyntheticEvent`) qui wrappent les événements natifs du navigateur.

### Syntaxe

```
// Passer une référence de fonction (pas d'appel !)
<button onClick={handleClick}>Clic</button>

// Arrow function inline (pour passer des arguments)
<button onClick={() => handleClick(id)}>Supprimer</button>

// Avec l'objet event
function handleClick(e) {
  e.preventDefault();  // Empêcher le comportement par défaut
  e.stopPropagation(); // Stopper la propagation
  console.log(e.target.value);
}
```

### Événements courants

<table id="bkmrk-%C3%89v%C3%A9nementdescription"> <thead><tr><th>Événement</th><th>Description</th></tr></thead> <tbody> <tr><td>`onClick`</td><td>Clic souris</td></tr> <tr><td>`onChange`</td><td>Valeur d'input modifiée</td></tr> <tr><td>`onSubmit`</td><td>Soumission de formulaire</td></tr> <tr><td>`onKeyDown` / `onKeyUp`</td><td>Touches clavier</td></tr> <tr><td>`onFocus` / `onBlur`</td><td>Focus / perte de focus</td></tr> <tr><td>`onMouseEnter` / `onMouseLeave`</td><td>Survol souris</td></tr> <tr><td>`onScroll`</td><td>Défilement</td></tr> </tbody></table>

### Délégation d'événement

```
// Gérer les clics de plusieurs enfants dans le parent
function Liste({ items, onDelete }) {
  return (
    <ul onClick={(e) => {
      const id = e.target.closest('li')?.dataset.id;
      if (id) onDelete(id);
    }}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>{item.nom}</li>
      ))}
    </ul>
  );
}
```