Modificadores de eventos: preventDefault, stopPropagation y once
Utilice modificadores separados por barras verticales para cambiar el comportamiento de los eventos sin código adicional
Modificadores de eventos: preventDefault, stopPropagation y once es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 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.
Sintaxis de modificadores
Añada modificadores al nombre del evento mediante el carácter de barra vertical.
<form on:submit|preventDefault={save}>preventDefault
Llama a event.preventDefault() antes de ejecutar su controlador. No necesita hacerlo manualmente.
stopPropagation
Llama a event.stopPropagation() para impedir que el evento se propague.
<div on:click|stopPropagation={inner}>once
El controlador se elimina después de la primera llamada. Resulta útil para eventos de configuración que solo deben ejecutarse una vez.
<button on:click|once={track}>Buy</button>passive
Marca el escuchador como pasivo e indica al navegador que no llamará a preventDefault. Mejora el rendimiento del desplazamiento.
<div on:touchstart|passive={start}>capture
Ejecuta el controlador durante la fase de captura en lugar de la fase de propagación.
self
Solo se activa cuando el objetivo del evento es el propio elemento, no uno de sus elementos secundarios.
<div on:click|self={close}>nonpassive
Fuerza a que un evento pasivo de forma predeterminada no sea pasivo, para que pueda llamar a preventDefault en él.
trusted
Solo se activa para eventos provocados por la interacción del usuario, no por un script.
Combinar modificadores
Encadene varios modificadores mediante barras verticales.
<a on:click|preventDefault|stopPropagation={go}>Click</a>Por qué usar modificadores
Permiten que los controladores se centren en la lógica de negocio y eliminan el código repetitivo.
Comprobación rápida
¿Qué hace |once?
Resumen
Los modificadores como preventDefault, stopPropagation, once y passive simplifican los ajustes habituales de los eventos.
Preguntas frecuentes
¿La lección «Modificadores de eventos: preventDefault, stopPropagation y once» es gratis?
Sí — el texto completo de «Modificadores de eventos: preventDefault, stopPropagation y once» 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 «Modificadores de eventos: preventDefault, stopPropagation y once»?
Utilice modificadores separados por barras verticales para cambiar el comportamiento de los eventos sin código adicional 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 2 de 4.
¿Cuánto tiempo toma la lección «Modificadores de eventos: preventDefault, stopPropagation y once»?
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