svelte:body for body events - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you use svelte:body to listen for a click event?

Consider this Svelte component code:

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

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

<p>Body clicked {count} times.</p>

What will the paragraph display after clicking anywhere on the page body three times?

Svelte

<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

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

<p>Body clicked {count} times.</p>

A Body clicked 3 times.

B Body clicked 1 times.

C Body clicked 0 times.

D Body clicked NaN times.

💡 Hint

Remember that svelte:body listens to events on the whole document body, not just inside the component.

The svelte:body tag attaches the event listener to the document body. Each click anywhere on the page triggers handleClick, increasing count. After three clicks, the count is 3.

📝 Syntax

intermediate

Which option correctly attaches a keydown event listener to the body using svelte:body?

You want to listen for the 'keydown' event on the whole page body in a Svelte component. Which of the following code snippets is syntactically correct?

A <svelte:body on-keydown={handleKeydown} />

B <svelte:body onKeydown={handleKeydown} />

C <svelte:body bind:keydown={handleKeydown} />

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

💡 Hint

Svelte uses the syntax on:eventname for event listeners.

The correct syntax for listening to events in Svelte is on:eventname. So <svelte:body on:keydown={handleKeydown} /> is correct. The others are invalid attribute syntax.

🔧 Debug

advanced

Why does this svelte:body event listener not update the UI?

Given this code:

<script>
  let pressed = { pressed: false };
  function onKeydown() {
    pressed.pressed = true;
  }
</script>

<svelte:body on:keydown={onKeydown} />

<p>Key pressed: {pressed.pressed}</p>

Pressing any key does not update the displayed text. Why?

Svelte

<script>
  let pressed = { pressed: false };
  function onKeydown() {
    pressed.pressed = true;
  }
</script>

<svelte:body on:keydown={onKeydown} />

<p>Key pressed: {pressed.pressed}</p>

A The <code>svelte:body</code> tag cannot listen to keydown events.

B The event handler changes the variable but does not trigger Svelte's reactivity because the variable is not reassigned properly.

C The variable <code>pressed</code> is not declared with <code>let</code>.

D The event handler function is missing the event parameter.

💡 Hint

Svelte updates the UI only when reactive variables are reassigned.

Svelte's reactivity system detects top-level assignments to variables declared with let. Mutating nested properties, like pressed.pressed = true, does not trigger reactivity. To update the UI, reassign the object itself, such as pressed = { ...pressed, pressed: true }.

🧠 Conceptual

advanced

What is the main difference between svelte:body and adding event listeners directly to window in Svelte?

Choose the best explanation for how svelte:body differs from adding event listeners directly to window in a Svelte component.

A <code>svelte:body</code> can only listen to click events, but <code>window</code> can listen to any event.

B <code>svelte:body</code> listens only to events inside the component, while <code>window</code> listeners catch all events globally.

C <code>svelte:body</code> automatically cleans up event listeners when the component unmounts, while manually added <code>window</code> listeners require manual cleanup.

D <code>svelte:body</code> attaches listeners to the document head, while <code>window</code> attaches to the browser window.

💡 Hint

Think about lifecycle and cleanup of event listeners.

svelte:body is a Svelte feature that attaches event listeners to the document body and automatically removes them when the component is destroyed. When adding listeners directly to window, you must manually remove them to avoid memory leaks.

❓ state_output

expert

What is the value of count after this sequence of events?

Given this Svelte component:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
  function decrement() {
    count -= 1;
  }
</script>

<svelte:body on:click={increment} on:contextmenu|preventDefault={decrement} />

<p>Count: {count}</p>

What is the value of count after the user performs these actions in order?
1. Left-click anywhere on the page body
2. Right-click anywhere on the page body
3. Left-click anywhere on the page body

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
  function decrement() {
    count -= 1;
  }
</script>

<svelte:body on:click={increment} on:contextmenu|preventDefault={decrement} />

<p>Count: {count}</p>

A 1

B 2

C 3

D -1

💡 Hint

Remember that right-click triggers the contextmenu event and the preventDefault modifier stops the menu but still runs the handler.

Step 1: Left-click triggers increment → count = 1 Step 2: Right-click triggers contextmenu with preventDefault and decrement → count = 0 Step 3: Left-click triggers increment → count = 1 Final count is 1.