Camille écrit un formulaire de recherche entièrement traité dans la…

<form id="f">
  <input type="text" id="ville" name="ville">
  <button type="submit">Chercher</button>
</form>
<p id="resultat"></p>

const f = document.getElementById("f");
f.addEventListener("submit", function (e) {
    const v = document.getElementById("ville").value;
    document.getElementById("resultat").textContent = "Recherche : " + v;
});

1. Un événement a une action par défaut, que le navigateur exécute en plus du gestionnaire. Celle de submit est d'envoyer le formulaire. Le gestionnaire de Camille s'exécute bien — d'où le texte visible un instant — puis le navigateur envoie le formulaire, reçoit une réponse, remplace la page et relance le script depuis le début. Le paragraphe resultat de la nouvelle page est vide : voilà la disparition.

La barre d'adresse change pour une seconde raison : le formulaire n'a ni method ni action. Par défaut, la méthode est GET et la destination est la page courante. Le navigateur recharge donc la même page en y ajoutant les paramètres.

2. Si la page était https://exemple.fr/meteo.html, l'adresse devient \mbox{https://exemple.fr/meteo.html?ville=Nantes}.

3. Il faut annuler l'action par défaut, ce que l'argument e — l'objet événement — permet de faire :

f.addEventListener("submit", function (e) {
    e.preventDefault();
    const v = document.getElementById("ville").value;
    document.getElementById("resultat").textContent = "Recherche : " + v;
});

4. Avec method="post" et action="/chercher", le navigateur enverrait une requête POST vers /chercher avec ville=Nantes dans le corps, et remplacerait la page par la réponse du serveur. Le texte écrit par le gestionnaire disparaîtrait de la même façon — mais cette fois l'adresse ne porterait aucun paramètre.

Contrôle : dans les deux cas, le symptôme « le texte clignote puis s'en va » a la même cause unique — la page est remplacée. Ce n'est jamais le gestionnaire qui échoue.

Ce qu'il faut retenir : un gestionnaire ne remplace pas le comportement du navigateur, il s'y ajoute. Deux événements ont une action par défaut qu'on annule presque toujours quand on traite soi-même : submit pour un formulaire, click sur un lien <a>.