Event Modifiers: preventDefault stopPropagation once
Use pipe-delimited modifiers to change event behavior without extra code.
Event Modifiers: preventDefault stopPropagation once is a free Sveltejs Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Modifier Syntax
Append modifiers to the event name with a pipe character.
<form on:submit|preventDefault={save}>preventDefault
Calls event.preventDefault() before your handler runs. No need to do it manually.
stopPropagation
Calls event.stopPropagation() to prevent the event from bubbling.
<div on:click|stopPropagation={inner}>once
The handler is removed after the first call. Useful for one-time setup events.
<button on:click|once={track}>Buy</button>passive
Marks the listener as passive, signaling the browser it will not call preventDefault. Improves scroll performance.
<div on:touchstart|passive={start}>capture
Runs the handler during the capture phase instead of the bubble phase.
self
Only fires when the event target is the element itself, not a child.
<div on:click|self={close}>nonpassive
Forces a passive-by-default event to be non-passive so you can call preventDefault on it.
trusted
Only fires for events triggered by user input, not script.
Combine Modifiers
Chain multiple modifiers with pipes.
<a on:click|preventDefault|stopPropagation={go}>Click</a>Why Use Modifiers
They keep handlers focused on business logic and remove boilerplate.
Quick Check
What does |once do?
Recap
Modifiers like preventDefault, stopPropagation, once, and passive simplify common event tweaks.
Frequently asked questions
Is the “Event Modifiers: preventDefault stopPropagation once” lesson free?
Yes — the full text of “Event Modifiers: preventDefault stopPropagation once” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “Event Modifiers: preventDefault stopPropagation once”?
Use pipe-delimited modifiers to change event behavior without extra code. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Event Modifiers: preventDefault stopPropagation once” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- on:click on:input on:submit
- Event Modifiers: preventDefault stopPropagation once
- Custom Events with createEventDispatcher
- Forwarding Events with on:click