Chapitre 6 – Gestion des événements

Les événements, c’est ce qui rend une page “interactive” : clic, survol, frappe au clavier, soumission de formulaire, changement d’un champ… Dans ce chapitre, tu vas apprendre à écouter ces événements proprement avec jQuery, à comprendre this, à éviter les erreurs fréquentes, et à utiliser une technique clé : la délégation d’événements (indispensable quand tu ajoutes des éléments dynamiquement).

1) Principe : “écouter” un événement

Un événement est un signal envoyé par le navigateur quand quelque chose se passe : clic sur un bouton, saisie dans un input, scroll, etc.

En jQuery, on écoute le plus souvent avec on() :

$(function () {
  $('#btn').on('click', function () {
    alert('Clic détecté');
  });
});

on() est la méthode moderne et recommandée. Elle remplace les anciennes méthodes click(), keyup(), etc. (qui existent encore, mais sont moins flexibles).

2) Le paramètre “event” (ou “e”) : à quoi sert-il ?

Le navigateur te fournit souvent un objet événement. On le récupère en paramètre :

$('#btn').on('click', function (event) {
  console.log(event.type); // "click"
});

preventDefault() : empêcher le comportement par défaut

Très important sur les liens et formulaires.

$('a').on('click', function (e) {
  e.preventDefault(); // empêche la navigation
  console.log('On gère le clic nous-mêmes.');
});

Si tu oublies preventDefault() sur un formulaire, la page va se recharger et tu perdras ton traitement JavaScript.

3) Comprendre “this” (fondamental)

Dans un handler d’événement, this représente l’élément HTML qui a déclenché l’événement. En jQuery, on le transforme souvent en objet jQuery :

$('.item').on('click', function () {
  // this = élément cliqué (DOM natif)
  const $el = $(this);     // version jQuery
  $el.toggleClass('active');
});

Règle simple : this = DOM, $(this) = jQuery (avec ses méthodes).

4) Événements courants à connaître

Événement	Quand	Exemple
click	Clic souris / tap mobile	$('#btn').on('click', ...)
submit	Soumission formulaire	$('form').on('submit', ...)
input	Valeur qui change (en temps réel)	$('#q').on('input', ...)
change	Changement validé (select/checkbox)	$('select').on('change', ...)
keydown / keyup	Clavier	$(document).on('keydown', ...)
mouseenter / mouseleave	Survol souris	$('.box').on('mouseenter', ...)

5) Exemple réel : gérer un formulaire sans rechargement

On intercepte la soumission d’un formulaire, on valide, puis on affiche un message. (On fera l’AJAX au Chapitre 11.)

$(function () {
  $('#loginForm').on('submit', function (e) {
    e.preventDefault(); // empêche le reload

    const email = String($('#email').val()).trim();
    const password = String($('#password').val()).trim();

    if (!email || !password) {
      $('#message').removeClass('ok').addClass('warn').text('Tous les champs sont requis.');
      return;
    }

    $('#message').removeClass('warn').addClass('ok').text('Formulaire validé (simulation).');
  });
});

Ici, e.preventDefault() est indispensable pour éviter la soumission classique.

6) Le grand piège : les éléments ajoutés dynamiquement

Problème : si tu ajoutes des éléments après coup (ex : append), les handlers déjà attachés ne s’appliquent pas automatiquement à ces nouveaux éléments.

Exemple du piège

$(function () {
  // Handler attaché aux .del présents AU MOMENT de l'exécution
  $('.del').on('click', function () {
    alert('Suppression');
  });

  // Puis on ajoute un bouton .del plus tard...
  $('#list').append('<button class="del">Supprimer</button>');
});

Le bouton ajouté après coup ne réagira pas, car il n’existait pas au moment où tu as attaché l’événement.

7) La solution pro : la délégation d’événements

La délégation consiste à écouter l’événement sur un parent (déjà présent), et à filtrer les clics qui viennent des enfants.

$(function () {
  // On écoute sur #list (qui existe) et on délègue aux .del
  $('#list').on('click', '.del', function () {
    alert('Suppression (déléguée)');
  });

  // Maintenant, même les nouveaux boutons fonctionneront :
  $('#list').append('<button class="del">Supprimer</button>');
});

Réflexe : dès que tu ajoutes des éléments dynamiquement, pense “délégation”.

Syntaxe : $(parent).on(event, selector, handler)

8) Stopper la propagation : stopPropagation()

Un clic peut remonter dans la hiérarchie (bubbling). Si tu as un clic sur un enfant ET sur un parent, les deux peuvent se déclencher.

$('#parent').on('click', function () {
  console.log('Clic parent');
});

$('#child').on('click', function (e) {
  e.stopPropagation(); // empêche de remonter au parent
  console.log('Clic enfant seulement');
});

À utiliser quand tu as des composants imbriqués (cards cliquables avec boutons internes, etc.).

9) Bonnes pratiques (pro)

Privilégie on() (cohérent, puissant).
Utilise $(function(){...}) (DOM prêt).
Stocke des sélections : const $btn = $('#btn').
Utilise la délégation pour les éléments dynamiques.
Sur formulaires/liens : pense preventDefault().

Exercice (progressif) – Todo list “pro” avec délégation

Objectif : reprendre l’exercice du Chapitre 5, mais en version robuste.

Un input #task, un bouton #add, et une liste #list.
Ajoute des items avec un bouton .del.
Utilise la délégation pour la suppression (un seul handler).

Correction

<input id="task" />
<button id="add">Ajouter</button>
<ul id="list"></ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function(){
    $('#add').on('click', function(){
      const task = String($('#task').val()).trim();
      if(!task) return;

      const html = `<li class="item">${task} <button class="del">Supprimer</button></li>`;
      $('#list').append(html);
      $('#task').val('');
    });

    // DÉLÉGATION : 1 seul handler pour tous les futurs .del
    $('#list').on('click', '.del', function(){
      $(this).closest('li').remove();
    });
  });
</script>

Note : ici on injecte ${task} dans une chaîne HTML. En production, attention à l’injection. Pour un niveau débutant, c’est acceptable, mais on préfèrera souvent créer l’élément et utiliser text().

Résumé du chapitre

Écouter un événement : on('click', ...)
preventDefault() : empêcher le comportement par défaut (formulaires/liens)
this = élément déclencheur, $(this) = version jQuery
Délégation : $(parent).on(event, selector, handler) pour les éléments ajoutés dynamiquement
stopPropagation() : éviter les déclenchements en cascade