Inoltro degli eventi con on:click
Emetta nuovamente gli eventi del componente verso il genitore utilizzando la direttiva on: senza argomenti.
Inoltro degli eventi con on:click è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Inoltro degli eventi
Per riemettere l'evento di un elemento figlio verso l'alto attraverso il componente, scriva on:event senza gestore.
Inoltro di base
In questo modo il click del pulsante interno viene inoltrato al consumer di MyButton.
<button on:click>Click</button>Ascoltare come componente padre
Il componente padre ascolta il componente nello stesso modo in cui ascolterebbe un elemento del DOM.
<MyButton on:click={handle} />Inoltrare più eventi
È possibile inoltrare tutti gli eventi nativi desiderati.
<input on:input on:focus on:blur />I componenti wrapper sono vantaggiosi
Questo approccio è essenziale per creare componenti wrapper come pulsanti, campi di input e link.
In combinazione con gli eventi personalizzati
Può combinare liberamente gli eventi del DOM inoltrati con i propri eventi createEventDispatcher.
Mantenere l'oggetto Event
Gli eventi inoltrati arrivano al componente padre mantenendo intatto l'oggetto Event originale del DOM.
Nessun modificatore necessario
Se vuole che sia il componente padre a gestire i modificatori, non li applichi al componente figlio.
Differenza rispetto agli eventi personalizzati
L'inoltro riemette eventi reali del DOM; il dispatch personalizzato ne crea di nuovi.
Compatibile con TypeScript
Gli eventi inoltrati mantengono i loro tipi precisi quando il componente padre li dichiara in TypeScript.
Nel mondo reale
La maggior parte dei componenti dei design system usa l'inoltro per rimanere flessibile senza elencare ogni prop.
Verifica rapida
Che cosa fa on:click senza gestore?
Riepilogo
Le direttive on:event senza gestore inoltrano gli eventi del DOM al componente padre, consentendo di creare API wrapper semplici.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Inoltro degli eventi con on:click» è gratuita?
Sì — il testo completo di «Inoltro degli eventi con on:click» è 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 «Inoltro degli eventi con on:click»?
Emetta nuovamente gli eventi del componente verso il genitore utilizzando la direttiva on: senza argomenti. 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 4 di 4.
Quanto tempo richiede la lezione «Inoltro degli eventi con on:click»?
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