Événements : clavier, souris, drag & drop (JS vs TS)

L’événement clavier réagit à la touche pressée, pas à son contenu : idéal pour les listes et les raccourcis.

Sans TS, la variable e reste any et l’accès e.key n’est pas vérifié.
Avec lang="ts", (e: KeyboardEvent) expose e.key et e.preventDefault() typés.
ArrowDown / ArrowUp et Enter couvrent les interactions au clavier les plus courantes.

src/lib/NavClavier.sveltesvelte

<script>
  let items = $state(['Livre', 'Cahier', 'Stylo'])
  let actif = $state(0)

  function surTouche(e) {
    if (e.key === 'ArrowDown') actif = Math.min(actif + 1, items.length - 1)
    if (e.key === 'ArrowUp') actif = Math.max(actif - 1, 0)
  }
</script>

<svelte:window onkeydown={surTouche} />
<ul>
  {#each items as item, i (item)}
    <li class:actif={i === actif}>{item}</li>
  {/each}
</ul>