Transmettre les événements avec on:click
Réémettez les événements d’un composant vers le parent avec la directive on: seule.
Transmettre les événements avec on:click est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Transmission des événements
Pour réémettre l’événement d’un élément enfant à travers votre composant, écrivez on:event sans gestionnaire.
Transmission de base
Cela transmet le clic du bouton interne au consommateur de MyButton.
<button on:click>Click</button>Écouter en tant que parent
Le parent écoute le composant de la même manière qu’un élément du DOM.
<MyButton on:click={handle} />Transmettre plusieurs événements
Vous pouvez transmettre autant d’événements natifs que vous le souhaitez.
<input on:input on:focus on:blur />Les composants enveloppes sont efficaces
Cette approche est essentielle pour créer des composants enveloppes comme des boutons, des champs et des liens.
Combiner avec des événements personnalisés
Combinez librement les événements du DOM transmis avec vos propres événements de createEventDispatcher.
Conserver l’objet événement
Les événements transmis parviennent au parent avec l’objet événement original du DOM intact.
Aucun modificateur nécessaire
Si vous voulez que le parent contrôle les modificateurs, ne les ajoutez pas à l’enfant.
Différence avec les événements personnalisés
La transmission réémet de véritables événements du DOM : l’envoi personnalisé en crée de nouveaux.
Compatible avec TypeScript
Les événements transmis conservent leurs types précis lorsque le parent les déclare dans TypeScript.
Dans la pratique
La plupart des composants d’un système de conception utilisent la transmission pour rester flexibles sans répertorier chaque propriété.
Vérification rapide
Que fait on:click sans gestionnaire ?
Récapitulatif
Les directives on:event sans gestionnaire transmettent les événements du DOM au parent de votre composant, ce qui permet de créer des interfaces propres pour les composants enveloppes.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Transmettre les événements avec on:click » est-elle gratuite ?
Oui — le texte complet de « Transmettre les événements avec on:click » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Transmettre les événements avec on:click » ?
Réémettez les événements d’un composant vers le parent avec la directive on: seule. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Transmettre les événements avec on:click » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- on:click on:input on:submit
- Modificateurs d’événements : preventDefault stopPropagation once
- Événements personnalisés avec createEventDispatcher
- Transmettre les événements avec on:click