on:click, on:input y on:submit
Asocie listeners de eventos del DOM directamente mediante la sintaxis de plantillas de Svelte
on:click, on:input y on:submit es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Directivas de eventos
Use on: seguido del nombre del evento del DOM para añadir un listener.
<button on:click={handleClick}>Click</button>Manejadores en línea
Pase una función flecha para la lógica en línea.
<button on:click={() => count++}>+</button>Manejadores con nombre
Defina una función en el script y haga referencia a ella por su nombre.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Recibir el objeto de evento
El manejador recibe el Event nativo como argumento.
function onChange(e) { value = e.target.value; }on:input
El evento input se dispara cada vez que el usuario escribe en un campo de texto.
<input on:input={(e) => text = e.target.value} />on:submit
Asócielo a un <form> para gestionar el envío. Use modificadores para impedir el comportamiento predeterminado.
<form on:submit|preventDefault={save}>...</form>on:keydown
Escuche eventos del teclado en campos de entrada o globalmente en el documento.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change frente a on:input
El evento change se dispara cuando el usuario termina de editar; input se dispara con cada pulsación.
Eventos de ratón
Todos los eventos de ratón estándar del DOM funcionan: mouseenter, mouseleave, mousemove.
Eventos táctiles
Los eventos táctiles de dispositivos móviles, como touchstart, son compatibles de la misma manera.
<div on:touchstart={start} on:touchend={end}>Varios escuchadores
Puede asociar varias directivas on: al mismo elemento para distintos eventos.
<button on:click={a} on:focus={b}>...</button>Comprobación rápida
¿Qué sintaxis asocia un controlador de clic?
Resumen
Use directivas on:event para cualquier evento del DOM. El controlador puede estar definido en línea o ser una función con nombre, y recibe el objeto Event.
Preguntas frecuentes
¿La lección «on:click, on:input y on:submit» es gratis?
Sí — el texto completo de «on:click, on:input y on:submit» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «on:click, on:input y on:submit»?
Asocie listeners de eventos del DOM directamente mediante la sintaxis de plantillas de Svelte Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «on:click, on:input y on:submit»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- on:click, on:input y on:submit
- Modificadores de eventos: preventDefault, stopPropagation y once
- Eventos personalizados con createEventDispatcher
- Transferencia de eventos con on:click