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.

Practice

1. What is the main purpose of using svelte:window in a Svelte component?

easy

A. To style the window element with CSS

B. To create a new browser window

C. To listen to events on the browser window like resize or scroll

D. To manage component state internally

Solution

1. Step 1: Understand svelte:window usage

   svelte:window is a special element in Svelte used to listen to events on the browser window object.

2. Step 2: Identify the correct purpose

   It does not create windows or style elements but listens to events like resize or scroll on the window.

3. Final Answer:

   To listen to events on the browser window like resize or scroll -> Option C

4. Quick Check:

   svelte:window listens to window events [OK]

Hint: Remember: svelte:window listens to window events only [OK]

Common Mistakes:

• Thinking it creates or styles windows
• Confusing with component state management
• Using it to listen to DOM element events

2. Which of the following is the correct syntax to listen for the window's resize event using svelte:window?

easy

A. <div on:resize={handleResize}></div>

B. <svelte:window on:resize={handleResize} />

C. <window onresize={handleResize}></window>

D. <svelte:window bind:resize={handleResize} />

Solution

1. Step 1: Recall correct event binding syntax in Svelte

   In Svelte, event listeners use on:eventName={handler} syntax.

2. Step 2: Apply to svelte:window

   The correct way to listen to window resize is <svelte:window on:resize={handleResize} />.

3. Final Answer:

   <svelte:window on:resize={handleResize} /> -> Option B

4. Quick Check:

   Use on:event on svelte:window [OK]

Hint: Use on:event syntax on svelte:window [OK]

Common Mistakes:

• Using HTML window tag which doesn't exist
• Trying to bind event with bind: instead of on:
• Attaching events to div instead of svelte:window

3. Given this Svelte code snippet, what will be the value of width after resizing the browser window?

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

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

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

medium

A. It updates to the current window width on every resize

B. It stays 0 because width is never updated

C. It throws an error because event.currentTarget is undefined

D. It updates only once when the component loads

Solution

1. Step 1: Understand the event handler logic

   The updateWidth function sets width to event.currentTarget.innerWidth, which is the window's width.

2. Step 2: Recognize svelte:window event behavior

   On every resize event, updateWidth runs, updating width reactively.

3. Final Answer:

   It updates to the current window width on every resize -> Option A

4. Quick Check:

   Resize triggers updateWidth, updating width [OK]

Hint: Resize triggers handler updating width reactively [OK]

Common Mistakes:

• Assuming width never changes without explicit initialization
• Confusing event.currentTarget with event.target
• Thinking event.currentTarget is undefined in this context

4. Identify the error in this Svelte code that tries to listen for the window scroll event:

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

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

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

medium

A. Not binding scrollY with bind:scrollY

B. Missing event parameter in onScroll function

C. Accessing window.scrollY inside the handler is invalid

D. Using <svelte:window> with a closing tag instead of self-closing

Solution

1. Step 1: Check svelte:window tag usage

   svelte:window is a special element that must be self-closing when used to listen to events.

2. Step 2: Identify the tag error

   The code uses an opening and closing tag <svelte:window></svelte:window>, which is invalid syntax for this element.

3. Final Answer:

   Using <svelte:window> with a closing tag instead of self-closing -> Option D

4. Quick Check:

   svelte:window must be self-closing [OK]

Hint: Always self-close svelte:window when listening to events [OK]

Common Mistakes:

• Trying to use opening and closing tags for svelte:window
• Thinking bind: is needed for event values
• Assuming window.scrollY is inaccessible in handler

5. You want to track both the window's width and height reactively using svelte:window. Which code snippet correctly updates both values on resize events?

hard

A. <script>
let width = 0, height = 0;
function updateSize() {
width = window.innerWidth;
height = window.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

B. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.currentTarget.innerWidth;
height = event.currentTarget.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

C. <script>
let width = 0, height = 0;
<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
</script>

D. <script>
let width = 0, height = 0;
function updateSize(event) {
width = event.target.innerWidth;
height = event.target.innerHeight;
}
</script>
<svelte:window on:resize={updateSize} />

Solution

1. Step 1: Understand event object properties

   In window resize events, event.currentTarget and event.target may not reliably provide innerWidth and innerHeight. Using window.innerWidth and window.innerHeight is safer.

2. Step 2: Check each option

   <script> let width = 0, height = 0; function updateSize(event) { width = event.currentTarget.innerWidth; height = event.currentTarget.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.currentTarget which may not always be the window. <script> let width = 0, height = 0; function updateSize() { width = window.innerWidth; height = window.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses window.innerWidth and window.innerHeight directly, which is correct. <script> let width = 0, height = 0; <svelte:window bind:innerWidth={width} bind:innerHeight={height} /> </script> tries to bind non-bindable properties. <script> let width = 0, height = 0; function updateSize(event) { width = event.target.innerWidth; height = event.target.innerHeight; } </script> <svelte:window on:resize={updateSize} /> uses event.target which is unreliable.

3. Final Answer:

   Use window.innerWidth and window.innerHeight inside the handler -> Option A

4. Quick Check:

   Access window size via window.innerWidth in handler [OK]

Hint: Use window.innerWidth inside handler, not event properties [OK]

Common Mistakes:

• Using event.currentTarget or event.target for window size
• Trying to bind window properties directly
• Assuming event object always has innerWidth/innerHeight