Modificadores de eventos: preventDefault stopPropagation once
Use modificadores delimitados por barras verticais para alterar o comportamento dos eventos sem código adicional.
Modificadores de eventos: preventDefault stopPropagation once é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Sintaxe de modificadores
Adicione modificadores ao nome do evento usando o caractere de barra vertical.
<form on:submit|preventDefault={save}>preventDefault
Chama event.preventDefault() antes de o seu manipulador ser executado. Não é necessário fazer isso manualmente.
stopPropagation
Chama event.stopPropagation() para impedir que o evento se propague.
<div on:click|stopPropagation={inner}>Uma vez
O manipulador é removido após a primeira chamada. É útil para eventos de configuração executados uma única vez.
<button on:click|once={track}>Buy</button>Passivo
Marca o ouvinte como passivo, indicando ao navegador que ele não chamará preventDefault. Melhora o desempenho da rolagem.
<div on:touchstart|passive={start}>Captura
Executa o manipulador durante a fase de captura, em vez da fase de propagação.
O próprio elemento
É acionado somente quando o destino do evento é o próprio elemento, não um elemento filho.
<div on:click|self={close}>Não passivo
Força um evento passivo por padrão a ser não passivo, para que você possa chamar preventDefault nele.
Confiável
É acionado somente para eventos disparados pela entrada do usuário, não por código.
Combinar modificadores
Encadeie vários modificadores usando barras verticais.
<a on:click|preventDefault|stopPropagation={go}>Click</a>Por que usar modificadores
Eles mantêm os manipuladores concentrados na lógica de negócio e eliminam código repetitivo.
Verificação rápida
O que |once faz?
Recapitulação
Modificadores como preventDefault, stopPropagation, once e passive simplificam ajustes comuns de eventos.
Perguntas Frequentes
A aula “Modificadores de eventos: preventDefault stopPropagation once” é grátis?
Sim — o texto completo de “Modificadores de eventos: preventDefault stopPropagation once” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Modificadores de eventos: preventDefault stopPropagation once”?
Use modificadores delimitados por barras verticais para alterar o comportamento dos eventos sem código adicional. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Modificadores de eventos: preventDefault stopPropagation once”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- on:click on:input on:submit
- Modificadores de eventos: preventDefault stopPropagation once
- Eventos personalizados com createEventDispatcher
- Encaminhando eventos com on:click