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

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the window is resized?

Consider this Svelte component that uses svelte:window to track window width. What will be shown on the screen after resizing the browser window?

Svelte

<script>
  let width = 0;
  function updateWidth(event) {
    width = event.currentTarget.innerWidth;
  }
</script>

<svelte:window on:resize={updateWidth} />

<p>Window width: {width}</p>

A The paragraph shows 0 always because width is never changed.

B The paragraph never updates because the event handler is not called.

C The paragraph updates live showing the current window width in pixels.

D The code throws a runtime error because <code>event.currentTarget</code> is undefined.

💡 Hint

Remember that svelte:window listens to window events and updates reactive variables.

The svelte:window element listens to the window's resize event. When the window is resized, updateWidth runs and updates the width variable with the new window width. This causes the paragraph to update and show the current width.

📝 Syntax

intermediate

Which option correctly listens to the window scroll event?

You want to run a function handleScroll whenever the user scrolls the window. Which Svelte syntax is correct?

Svelte

function handleScroll(event) {
  console.log('scroll position:', window.scrollY);
}

A <window on:scroll={handleScroll} />

B <svelte:window on:scroll={handleScroll} />

C <svelte:document on:scroll={handleScroll} />

D <window:scroll on={handleScroll} />

💡 Hint

Use the special Svelte element for window events.

The correct syntax to listen to window events in Svelte is using <svelte:window>. Option B uses this correctly. Other options use invalid tags or syntax.

🔧 Debug

advanced

Why does this svelte:window event handler not update the variable?

Look at this code snippet. The scrollY variable should update on scroll but it does not. Why?

Svelte

<script>
  let scrollY = 0;
  function onScroll(event) {
    scrollY = event.target.scrollY;
  }
</script>

<svelte:window on:scroll={onScroll} />

<p>Scroll position: {scrollY}</p>

A <code>event.target.scrollY</code> is undefined; should use <code>window.scrollY</code> instead.

B <code>scrollY</code> is a constant and cannot be reassigned.

C The <code>onScroll</code> function is never called because the event name is wrong.

D The <code>svelte:window</code> tag must be self-closing with a slash.

💡 Hint

Check what event.target refers to in window scroll events.

In window scroll events, event.target is the window object, but scrollY is a property of window itself, not the event target. Accessing event.target.scrollY is undefined. The correct way is to use window.scrollY.

❓ state_output

advanced

What is the value of keyPressed after pressing the 'a' key?

This Svelte component listens for keydown events on the window. What will keyPressed contain after pressing the 'a' key?

Svelte

<script>
  let keyPressed = '';
  function onKeydown(event) {
    keyPressed = event.key;
  }
</script>

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

<p>Last key pressed: {keyPressed}</p>

A 'a'

B 'KeyA'

C 'keydown'

D '' (empty string)

💡 Hint

Check the property of the event that holds the actual key character.

The event.key property contains the character of the key pressed, so pressing 'a' sets keyPressed to 'a'. event.code would be 'KeyA', but that is not used here.

🧠 Conceptual

expert

Why use svelte:window instead of window.addEventListener in Svelte?

Which reason best explains why svelte:window is preferred over manually adding event listeners to window in Svelte components?

A Using <code>window.addEventListener</code> is not allowed in Svelte components.

B Event listeners added with <code>window.addEventListener</code> cannot access component variables.

C <code>svelte:window</code> runs event handlers outside the browser event loop for better performance.

D <code>svelte:window</code> automatically cleans up event listeners when the component is destroyed, preventing memory leaks.

💡 Hint

Think about component lifecycle and cleanup.

svelte:window is a Svelte feature that automatically adds and removes event listeners tied to the component's lifecycle. This prevents memory leaks and makes code cleaner. Manual window.addEventListener requires explicit cleanup.