svelte:window for window events

Introduction

The svelte:window tag lets you listen to events on the browser window, like resizing or scrolling, so your app can react to changes outside its own elements.

You want to update your layout when the browser window size changes.

You want to detect when the user scrolls the page to show or hide something.

You want to listen for keyboard events globally, like pressing Escape to close a modal.

You want to track when the window gains or loses focus.

You want to react to window-level events like online/offline status changes.

Syntax

Svelte

<svelte:window on:eventName={handler} />

Replace eventName with the actual window event like resize, scroll, or keydown.

The handler is a function that runs when the event happens.

Examples

Runs handleResize function whenever the window is resized.

Svelte

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

Runs handleScroll function whenever the user scrolls the page.

Svelte

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

Runs handleKeydown function when any key is pressed anywhere in the window.

Svelte

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

Sample Program

This component shows the current window width and height. It updates the values whenever the window is resized using svelte:window and the resize event.

Svelte

<script>
  let width = 0;
  let height = 0;

  function updateSize() {
    width = window.innerWidth;
    height = window.innerHeight;
  }

  // Initialize size on component load
  updateSize();
</script>

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

<main>
  <h1>Window size</h1>
  <p>Width: {width}px</p>
  <p>Height: {height}px</p>
</main>

Important Notes

You don't need to manually add or remove event listeners; Svelte handles that for you.

Use svelte:window only for events on the window object, not on specific elements.

Remember to keep event handlers fast and simple to avoid slowing down your app.

Summary

svelte:window lets you listen to browser window events easily.

Use it to react to changes like resizing, scrolling, or key presses anywhere in the window.

Svelte manages event listeners automatically, so your code stays clean.

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