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

Concept Flow - svelte:window for window events

Start Component

↓

Add <svelte:window> listener

↓

User triggers window event

↓

Event handler runs

↓

Update component state

↓

Component re-renders

↓

Wait for next event or unmount

The component adds a listener to the window using <svelte:window>. When the user triggers a window event, the handler updates state and the component re-renders.

Execution Sample

Svelte

<script>
  let width = 0;
  function updateWidth() {
    width = window.innerWidth;
  }
</script>
<svelte:window on:resize={updateWidth} />
<p>Width: {width}</p>

This code listens for window resize events and updates the width variable shown on screen.

Execution Table

Step	Event Triggered	Handler Called	State Before	State After	Rendered Output
1	No event yet	No	width = 0	width = 0	Width: 0
2	User resizes window to 800px	Yes	width = 0	width = 800	Width: 800
3	User resizes window to 1024px	Yes	width = 800	width = 1024	Width: 1024
4	User resizes window to 640px	Yes	width = 1024	width = 640	Width: 640
5	No more events	No	width = 640	width = 640	Width: 640

💡 No more window resize events, so handler is not called and state stays the same.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
width	0	800	1024	640	640

Key Moments - 3 Insights

Why does the width variable update only after a window resize event?

Because the <svelte:window> listener calls the updateWidth function only when the resize event happens, as shown in execution_table rows 2-4.

What happens if the window is not resized after the component loads?

The width stays at its initial value 0, since no resize event triggers the handler (see execution_table row 1).

Can multiple window events be handled with <svelte:window>?

Yes, you can add multiple event listeners on <svelte:window> for different events, each with their own handler.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of width after step 3?

A 640

B 800

C 1024

D 0

💡 Hint

Check the 'State After' column in row 3 of the execution_table.

At which step does the handler NOT run?

A Step 5

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'Handler Called' column showing 'No' in the execution_table.

If the initial width was set to 500 instead of 0, how would the output at step 1 change?

A Width: 0

B Width: 500

C Width: 800

D Width: undefined

💡 Hint

Refer to variable_tracker 'Start' value and rendered output in execution_table row 1.

Concept Snapshot

Use <svelte:window> to listen to window events.
Syntax: <svelte:window on:event={handler} />
Handler runs when event fires, updating component state.
Component re-renders with new state.
Useful for resize, scroll, keydown, and more.
Always update reactive variables inside handlers.

Full Transcript

This example shows how to use <svelte:window> to listen for window resize events. The component starts with width set to 0. When the user resizes the window, the updateWidth function runs, setting width to the new window.innerWidth. The component then re-renders to show the updated width. If no resize happens, the width stays the same. Multiple window events can be handled by adding more <svelte:window> listeners. This pattern helps react to global browser events easily inside Svelte components.

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