javascript / intermediate
Snippet
Deklarative globale Event-Listener
Das spezielle Element '<svelte:window>' ermöglicht es, Event-Listener deklarativ an das globale Window-Objekt zu binden. Dies vermeidet manuelle 'addEventListener'-Aufrufe und sorgt für automatisches Cleanup.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
<script>let lastKey = 'None';function handleKeydown(event) {lastKey = event.key;}</script><svelte:window on:keydown={handleKeydown} /><p>Focus anywhere and press a key.</p><p>Key: <strong>{lastKey}</strong></p>
svelte
Erklärung
1
<svelte:window on:keydown={handleKeydown} />
Horcht global auf Keydown-Events, unabhängig davon, wo der Fokus liegt.
2
lastKey = event.key;
Aktualisiert den lokalen Zustand reaktiv unter Verwendung der Event-Daten.