svelte:body for body events - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is svelte:body used for in Svelte?

svelte:body lets you listen to events on the document body directly from a Svelte component.

This is useful when you want to catch events like clicks or key presses anywhere on the page, not just inside your component.

beginner

How do you add a click event listener on the document body using svelte:body?

<svelte:body on:click={handleClick} />

This code runs handleClick whenever the user clicks anywhere on the page.

intermediate

Why might you prefer svelte:body over adding event listeners manually in onMount?

svelte:body automatically adds and removes the event listener when the component mounts and unmounts.

This means less code and fewer chances to forget cleanup, which helps avoid bugs.

intermediate

Can you listen to multiple events on svelte:body at once? How?

Yes! You can add multiple event listeners by repeating on:event attributes:

<svelte:body on:click={handleClick} on:keydown={handleKeydown} />

advanced

What happens if you use svelte:body inside multiple components on the same page?

Each component adds its own event listeners to the body.

All listeners will run when the event happens, so be careful to avoid conflicts or duplicated work.

What does <svelte:body on:click={handleClick} /> do?

A Listens for clicks anywhere on the page

B Listens for clicks only inside the component

C Adds a click listener to a button

D Prevents clicks on the body

svelte:body attaches the event listener to the document body, so it catches clicks anywhere on the page.

Why is svelte:body better than manually adding event listeners in onMount?

A It runs faster

B It automatically cleans up listeners when the component unmounts

C It only works for click events

D It disables other event listeners

svelte:body handles adding and removing listeners automatically, reducing bugs.

Can you listen to keyboard events on the body using svelte:body?

A Only inside input fields

B No, only mouse events work

C Yes, by using <code>on:keydown</code> or similar

D Only if you add extra libraries

You can listen to any event on the body, including keyboard events like keydown.

What happens if multiple components use svelte:body to listen to the same event?

A All their event handlers run when the event fires

B Only the first component's handler runs

C The event is blocked

D An error occurs

Each listener is independent, so all handlers run on the event.

Which of these is a correct way to listen for a scroll event on the body in Svelte?

A document.body.scroll = handleScroll

B &lt;div on:scroll={handleScroll} /&gt;

C window.addEventListener('scroll', handleScroll)

D &lt;svelte:body on:scroll={handleScroll} /&gt;

svelte:body is the Svelte way to listen to body events declaratively.

Explain how svelte:body helps manage event listeners on the document body in a Svelte app.

Think about how you would catch clicks anywhere on the page from inside a component.

Describe a scenario where using svelte:body is better than adding event listeners manually in lifecycle functions.

Consider global keyboard shortcuts or clicks outside a modal.