on:click on:input on:submit
Fügen Sie DOM-Ereignis-Listener direkt mit der Svelte-Template-Syntax hinzu.
on:click on:input on:submit ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Event-Direktiven
Verwenden Sie on: gefolgt vom Namen des DOM-Events, um einen Listener anzubinden.
<button on:click={handleClick}>Click</button>Inline-Handler
Übergeben Sie für Inline-Logik eine Arrow-Funktion.
<button on:click={() => count++}>+</button>Benannte Handler
Definieren Sie eine Funktion im Script und verweisen Sie über ihren Namen darauf.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Das Event-Objekt empfangen
Der Handler erhält das native Event als Argument.
function onChange(e) { value = e.target.value; }on:input
Das input-Event wird jedes Mal ausgelöst, wenn die Benutzerin oder der Benutzer in ein Textfeld schreibt.
<input on:input={(e) => text = e.target.value} />on:submit
Binden Sie es an ein <form>, um das Absenden zu verarbeiten. Verwenden Sie Modifikatoren, um das Standardverhalten zu verhindern.
<form on:submit|preventDefault={save}>...</form>on:keydown
Hören Sie auf Tastaturereignisse in Eingabefeldern oder global auf dem Dokument.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change vs on:input
Das change-Event wird ausgelöst, wenn die Bearbeitung beendet ist; input wird bei jedem Tastendruck ausgelöst.
Mausereignisse
Alle standardmäßigen DOM-Mausereignisse funktionieren: mouseenter, mouseleave, mousemove.
Touch-Ereignisse
Mobile Touch-Ereignisse wie touchstart werden auf dieselbe Weise unterstützt.
<div on:touchstart={start} on:touchend={end}>Mehrere Listener
Sie können mehrere on:-Direktiven für verschiedene Ereignisse an dasselbe Element anhängen.
<button on:click={a} on:focus={b}>...</button>Schnelltest
Welche Syntax hängt einen Click-Handler an?
Zusammenfassung
Verwenden Sie on:event-Direktiven für jedes DOM-Ereignis. Der Handler kann inline oder eine benannte Funktion sein und erhält das Event.
Häufig gestellte Fragen
Ist die Lektion „on:click on:input on:submit“ kostenlos?
Ja — der vollständige Text von „on:click on:input on:submit“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „on:click on:input on:submit“?
Fügen Sie DOM-Ereignis-Listener direkt mit der Svelte-Template-Syntax hinzu. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „on:click on:input on:submit“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- on:click on:input on:submit
- Ereignismodifikatoren: preventDefault stopPropagation once
- Benutzerdefinierte Ereignisse mit createEventDispatcher
- Ereignisse mit on:click weiterleiten