10.2 — Les événements

⏱️ TL;DR — Chaque composant émet des événements DOM personnalisés au format action.bs.composant : show/shown, hide/hidden (modale, offcanvas, dropdown…), slid.bs.carousel, shown.bs.tab. Le préfixe sans n = avant (annulable), le participe passé (shown) = après. On les écoute avec addEventListener.

🎯 Objectifs

• Écouter les événements de cycle de vie.
• Distinguer événements « avant » et « après ».
• Annuler une action avec preventDefault.

Le motif show / shown

const modalEl = document.getElementById('m')
 
modalEl.addEventListener('show.bs.modal', () => {
  console.log('la modale va s\'ouvrir')
})
modalEl.addEventListener('shown.bs.modal', () => {
  // ouverture TERMINÉE (animation finie) → placer le focus, charger des données…
  modalEl.querySelector('input')?.focus()
})
modalEl.addEventListener('hidden.bs.modal', () => {
  // fermeture terminée → nettoyer le formulaire
})

Règle : show/hide = avant (début), shown/hidden = après (fin d’animation).

Annuler une action

Les événements « avant » sont annulables :

modalEl.addEventListener('show.bs.modal', (e) => {
  if (!userIsAllowed) e.preventDefault()   // empêche l'ouverture
})

Événements par composant (exemples)

Infos dans l’événement

Certains événements portent des données (relatedTarget, e.to/e.from pour le carousel) :

modalEl.addEventListener('show.bs.modal', (e) => {
  const trigger = e.relatedTarget   // le bouton qui a ouvert la modale
  const id = trigger.getAttribute('data-id')
  // pré-remplir la modale selon le déclencheur…
})

⚠️ Piège — Faire le focus dans show (avant) plutôt que shown (après) : l’élément n’est pas encore visible/animé, le focus échoue ou saute. Placez les actions post-ouverture dans shown.

💡 Pour un dev React — Ces événements DOM natifs s’écoutent dans un useEffect avec cleanup. Mais en pratique, react-bootstrap expose des props onShow/onHide/onEntered qui remplacent ces écouteurs — plus idiomatique dans un composant React.

✏️ Exercices

1. Mettre le focus sur le premier champ d’une modale une fois ouverte.

2. Empêcher une modale de s’ouvrir sous condition.

🧠 Quiz de révision

Chapitre suivant : 10.3 — Bundle, plugins & Popper