on:click on:input on:submit
Colleghi i listener degli eventi DOM direttamente utilizzando la sintassi dei template Svelte.
on:click on:input on:submit è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Direttive degli eventi
Utilizzi on: seguito dal nome dell'evento DOM per collegare un listener.
<button on:click={handleClick}>Click</button>Gestori inline
Passi una funzione freccia per la logica inline.
<button on:click={() => count++}>+</button>Gestori nominati
Definisca una funzione nello script e la richiami per nome.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Ricevere l'oggetto evento
Il gestore riceve l'Event nativo come argomento.
function onChange(e) { value = e.target.value; }on:input
L'evento input viene attivato ogni volta che l'utente digita in un campo di testo.
<input on:input={(e) => text = e.target.value} />on:submit
Lo colleghi a un <form> per gestire l'invio. Utilizzi i modificatori per impedire il comportamento predefinito.
<form on:submit|preventDefault={save}>...</form>on:keydown
Ascolti gli eventi della tastiera sugli input o globalmente nel document.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change rispetto a on:input
L'evento change viene attivato quando l'utente termina la modifica; input viene attivato a ogni pressione di tasto.
Eventi del mouse
Funzionano tutti gli eventi standard del mouse del DOM: mouseenter, mouseleave, mousemove.
Eventi touch
Gli eventi touch dei dispositivi mobili, come touchstart, sono supportati nello stesso modo.
<div on:touchstart={start} on:touchend={end}>Più listener
È possibile associare più direttive on: allo stesso elemento per eventi diversi.
<button on:click={a} on:focus={b}>...</button>Verifica rapida
Quale sintassi associa un gestore all'evento click?
Riepilogo
Usi le direttive on:event per qualsiasi evento del DOM. Il gestore può essere inline o una funzione con nome e riceve l'oggetto Event.
Domande Frequenti
La lezione «on:click on:input on:submit» è gratuita?
Sì — il testo completo di «on:click on:input on:submit» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «on:click on:input on:submit»?
Colleghi i listener degli eventi DOM direttamente utilizzando la sintassi dei template Svelte. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «on:click on:input on:submit»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- on:click on:input on:submit
- Modificatori degli eventi: preventDefault stopPropagation once
- Eventi personalizzati con createEventDispatcher
- Inoltro degli eventi con on:click