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. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
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. 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. The Sveltejs Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.
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