Gestion des événements

En Svelte 5, on gère les événements avec des attributs d'événement : onclick, oninput, onkeydown, onsubmit... Ce sont de simples attributs avec une fonction entre accolades. C'est comme répondre aux signaux d'un cor de guerre !

Syntaxe de base

<script>
  function handleClick() {
    alert('Le Viking a attaqué !');
  }
</script>

<button onclick={handleClick}>
  Attaque !
</button>

Le nom de l'attribut, c'est on + le nom de l'événement, en minuscules : onclick écoute l'événement click. La casse compte : onClick, c'est autre chose !

Fonctions en ligne

Tu peux aussi écrire les fonctions directement :

<button onclick={() => alert('SKAL !')}>
  Santé !
</button>

Raccourci : {onclick}

Quand la fonction porte le même nom que l'attribut, tu peux utiliser le raccourci :

<script>
  function onclick() {
    alert('Le cor de guerre a retenti !');
  }
</script>

<button {onclick}>Sonner le cor</button>

L'objet événement

La fonction reçoit un objet événement en argument :

<script>
  function handleClick(event) {
    console.log('Clic sur :', event.target);
    console.log('Position X :', event.clientX);
    console.log('Position Y :', event.clientY);
  }
</script>

<button onclick={handleClick} class="battlefield">
  Clique sur le champ de bataille
</button>

Événements courants

<script>
  let message = $state('');
  let isHovering = $state(false);

  function handleSubmit(event) {
    event.preventDefault(); // le formulaire ne recharge pas la page
    message = 'Formulaire envoyé !';
  }
</script>

<!-- Événements de souris -->
<button onclick={() => message = 'Cliqué !'}>Clic</button>
<button ondblclick={() => message = 'Double clic !'}>Double</button>

<button
  onmouseenter={() => isHovering = true}
  onmouseleave={() => isHovering = false}
  class:hovering={isHovering}
>
  {isHovering ? 'Survolé !' : 'Survole-moi'}
</button>

<!-- Événements de clavier -->
<input
  onkeydown={(e) => message = `Touche : ${e.key}`}
  onfocus={() => message = 'Champ actif'}
  onblur={() => message = 'Champ inactif'}
  placeholder="Écris quelque chose..."
>

<!-- Événements de formulaire -->
<form onsubmit={handleSubmit}>
  <button type="submit">Envoyer</button>
</form>

<p>{message}</p>

Au lieu des modificateurs : du JavaScript simple

En Svelte 4, on ajoutait des modificateurs aux événements, comme on:submit|preventDefault. Les attributs d'événement de Svelte 5 n'ont pas de modificateurs : tu écris toute la logique dans la fonction de gestion, au même endroit :

<script>
  let log = $state([]);

  function handleSubmit(event) {
    event.preventDefault(); // au lieu de |preventDefault
    log.push('Ordre envoyé');
  }

  function handleShield(event) {
    event.stopPropagation(); // au lieu de |stopPropagation
    log.push('Le bouclier a arrêté le coup');
  }

  function handleBoard(event) {
    if (event.target !== event.currentTarget) return; // au lieu de |self
    log.push('Pont cliqué');
  }

  // au lieu de |once - une fonction qui n'appelle le gestionnaire qu'une fois
  function once(fn) {
    return function (event) {
      if (fn) fn.call(this, event);
      fn = null;
    };
  }
</script>

<form onsubmit={handleSubmit}>
  <button type="submit">Envoyer un ordre</button>
</form>

<button onclick={once(() => log.push('Le cor a sonné'))}>Une seule fois !</button>

<!-- capture : ajoute "capture" à la fin du nom de l'événement -->
<div onclickcapture={() => log.push('Phase de capture')}>
  <button onclick={handleBoard}>Pont</button>
  <button onclick={handleShield}>Bouclier</button>
</div>

<ul>
  {#each log as entry}
    <li>{entry}</li>
  {/each}
</ul>

Aide-mémoire : l'ancienne syntaxe (Svelte 4) et son équivalent en Svelte 5 :

• on:click={fn} → onclick={fn}
• le modificateur preventDefault → event.preventDefault() dans la fonction
• le modificateur stopPropagation → event.stopPropagation() dans la fonction
• le modificateur once → une fonction d'emballage, par exemple once(fn)
• le modificateur self → if (event.target === event.currentTarget)
• le modificateur capture → onclickcapture={fn}

Tu verras encore la directive on: dans du code plus ancien : en Svelte 5, elle est dépréciée, et on ne doit pas la mélanger avec les attributs d'événement dans un même composant.

Exemple : Guerrier interactif

<script>
  let health = $state(100);
  let energy = $state(100);
  let log = $state([]);

  function attack() {
    if (energy >= 20) {
      energy -= 20;
      log.push('Attaque ! -20 énergie');
    }
  }

  function defend() {
    if (energy >= 10) {
      energy -= 10;
      health = Math.min(100, health + 5);
      log.push('Défense ! +5 santé');
    }
  }

  function rest() {
    energy = Math.min(100, energy + 30);
    log.push('Repos ! +30 énergie');
  }
</script>

<div class="warrior-panel">
  <h2>Panneau du guerrier</h2>

  <div class="stats">
    <div class="stat">
      <span>Santé :</span>
      <progress value={health} max="100"></progress>
      <span>{health}/100</span>
    </div>
    <div class="stat">
      <span>Énergie :</span>
      <progress value={energy} max="100"></progress>
      <span>{energy}/100</span>
    </div>
  </div>

  <div class="actions">
    <button onclick={attack} disabled={energy < 20}>Attaque (20 énergie)</button>
    <button onclick={defend} disabled={energy < 10}>Défense (10 énergie)</button>
    <button onclick={rest}>Repos</button>
  </div>

  <div class="log">
    <h3>Journal :</h3>
    {#each log.slice(-5) as entry}
      <p>{entry}</p>
    {/each}
  </div>
</div>

Voilà les bases des événements en Svelte. Simple, non ? Comme une hache bien aiguisée !

<script>
  // Exercise: Event handling with event attributes (onclick, onkeydown)

  let health = $state(100);
  let energy = $state(100);
  let log = $state([]);
  let warriorName = 'Ragnar';

  function attack() {
    if (energy >= 20) {
      energy -= 20;
      addLog('Attack! -20 energy');
    }
  }

  function defend() {
    if (energy >= 10) {
      energy -= 10;
      health = Math.min(100, health + 10);
      addLog('Defend! +10 health');
    }
  }

  function rest() {
    energy = Math.min(100, energy + 30);
    addLog('Rest! +30 energy');
  }

  function handleKeydown(event) {
    if (event.key === 'a') attack();
    if (event.key === 'd') defend();
    if (event.key === 'r') rest();
  }

  function addLog(message) {
    log = [...log.slice(-4), message];
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<main class="battle-panel">
  <h1>Battle Panel: {warriorName}</h1>

  <div class="bars">
    <div class="bar">
      <span class="bar-label">Health</span>
      <div class="bar-track">
        <div class="bar-fill health" style="width: {health}%"></div>
      </div>
      <span>{health}/100</span>
    </div>

    <div class="bar">
      <span class="bar-label">Energy</span>
      <div class="bar-track">
        <div class="bar-fill energy" style="width: {energy}%"></div>
      </div>
      <span>{energy}/100</span>
    </div>
  </div>

  <div class="actions">
    <button
      onclick={attack}
      disabled={energy < 20}
      class="attack"
    >
      Attack (A) - 20 energy
    </button>

    <button
      onclick={defend}
      disabled={energy < 10}
      class="defend"
    >
      Defend (D) - 10 energy
    </button>

    <button
      onclick={rest}
      class="rest"
    >
      Rest (R)
    </button>
  </div>

  <div class="log">
    <h3>Log:</h3>
    {#each log as entry}
      <p>{entry}</p>
    {:else}
      <p class="empty">No actions...</p>
    {/each}
  </div>

  <p class="hint">Use keys A, D, R to control!</p>
</main>

<style>
  .battle-panel {
    font-family: 'Georgia', serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
    color: #e8d5b7;
    min-height: 100vh;
  }

  h1 {
    color: #d4af37;
    text-align: center;
    margin-bottom: 2rem;
  }

  .bars {
    margin-bottom: 2rem;
  }

  .bar {
    margin-bottom: 1rem;
  }

  .bar .bar-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: inherit;
  }

  .bar-track {
    height: 24px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #3d2914;
  }

  .bar-fill {
    height: 100%;
    transition: width 0.3s;
  }

  .bar-fill.health {
    background: linear-gradient(90deg, #8b0000, #ff4444);
  }

  .bar-fill.energy {
    background: linear-gradient(90deg, #1e3a5f, #4a90d9);
  }

  .bar span {
    font-size: 0.8rem;
    color: #8b7355;
  }

  .actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
  }

  button {
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #d4af37;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
  }

  button.attack { background: #8b0000; }
  button.defend { background: #1e3a5f; }
  button.rest { background: #2d5016; }

  button:hover:not(:disabled) {
    transform: scale(1.02);
    filter: brightness(1.2);
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .log {
    background: rgba(0,0,0,0.3);
    border: 1px solid #3d2914;
    border-radius: 4px;
    padding: 1rem;
  }

  .log h3 {
    color: #d4af37;
    margin: 0 0 0.5rem 0;
  }

  .log p {
    margin: 0.25rem 0;
    padding: 0.25rem 0.5rem;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 2px;
  }

  .log .empty {
    color: #8b7355;
    font-style: italic;
  }

  .hint {
    text-align: center;
    margin-top: 1rem;
    color: #8b7355;
    font-size: 0.9rem;
  }
</style>