0
0
Svelteframework~10 mins

svelte:body for body events - Step-by-Step Execution

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Concept Flow - svelte:body for body events
Component mounts
↓
Attach event listener to <body>
↓
User triggers event on body
↓
Event handler runs
↓
Update component state if needed
↓
Component re-renders
↓
Component unmounts
↓
Remove event listener from <body>
This flow shows how Svelte attaches an event listener to the document body using <svelte:body>, handles events, updates state, and cleans up on unmount.
Execution Sample
Svelte
<script>
  let count = 0;
  function onBodyClick() {
    count += 1;
  }
</script>
<svelte:body on:click={onBodyClick} />
<p>Clicks on body: {count}</p>
This code counts how many times the user clicks anywhere on the page body.
Execution Table
StepEvent TriggeredState BeforeActionState AfterComponent Update
1Component mountscount=0Attach click listener to <body>count=0Render initial count=0
2User clicks on bodycount=0onBodyClick increments countcount=1Re-render count=1
3User clicks on body againcount=1onBodyClick increments countcount=2Re-render count=2
4Component unmountscount=2Remove click listener from <body>count=2No render
💡 Component unmounts and event listener is removed to prevent memory leaks.
Variable Tracker
VariableStartAfter 1After 2Final
count0122
Key Moments - 2 Insights
Why does the event listener stay active even if I click outside the component?
Because <svelte:body> attaches the event listener directly to the document body, it catches events anywhere on the page, not just inside the component. See execution_table steps 2 and 3.
What happens if I forget to remove the event listener when the component unmounts?
The listener stays active and can cause bugs or memory leaks. Svelte automatically removes it on unmount as shown in execution_table step 4.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution table, what is the value of count after the second body click?
A2
B1
C0
D3
💡 Hint
Check the 'State After' column for step 3 in the execution_table.
At which step is the event listener removed from the body?
AStep 2
BStep 4
CStep 3
DNever removed
💡 Hint
Look for the action describing removal in the execution_table.
If the onBodyClick function did not update count, what would happen to the component render?
AIt would throw an error
BIt would re-render with updated count
CIt would not re-render
DIt would remove the event listener
💡 Hint
Refer to the 'Component Update' column in execution_table steps 2 and 3.
Concept Snapshot
Use <svelte:body> to listen for events on the whole page body.
Attach events like on:click directly to <svelte:body>.
Event handlers run when user interacts anywhere on the page.
Svelte cleans up listeners automatically on component unmount.
Useful for global shortcuts or clicks outside components.
Full Transcript
This lesson shows how to use the <svelte:body> element in Svelte to listen for events on the entire document body. When the component mounts, Svelte attaches the event listener to the body. Each time the user clicks anywhere on the page, the event handler runs and updates the component state. The component then re-renders to show the updated state. When the component unmounts, Svelte removes the event listener to avoid memory leaks. This pattern is useful for detecting clicks outside a component or global keyboard shortcuts.