svelte:window for window events - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is svelte:window used for in Svelte?

svelte:window lets you listen to events on the browser's window object, like resizing or scrolling, directly in your Svelte component.

beginner

How do you listen to the window's resize event using svelte:window?

You add an event listener like <svelte:window on:resize={handleResize} /> where handleResize is your function to run on resize.

intermediate

Can you bind window properties like innerWidth using svelte:window?

Yes! You can bind window properties directly, for example: <svelte:window bind:innerWidth /> to keep a variable updated with the window width.

intermediate

What happens if you add multiple on:scroll listeners on svelte:window in one component?

Each listener runs independently. You can have multiple handlers for the same event, but it's better to combine logic to keep code clean.

intermediate

Why is svelte:window better than adding window event listeners manually in onMount?

svelte:window automatically cleans up event listeners when the component is destroyed, preventing memory leaks and simplifying code.

Which tag lets you listen to window events in Svelte?

A <window:event>

B <svelte:window>

C <window-listener>

D <svelte:event>

<svelte:window> is the correct tag to listen to window events in Svelte.

How do you bind the window's width to a variable width?

A <svelte:window bind:width />

B <svelte:window bind:windowWidth={width} />

C <svelte:window bind:innerWidth />

D <svelte:window bind:innerWidth={width} />

You bind innerWidth to your variable like bind:innerWidth={width}.

What event would you listen to for detecting when the user scrolls the page?

A scroll

B resize

C click

D load

The scroll event fires when the user scrolls the window.

What is a benefit of using svelte:window over manual event listeners?

A Automatic cleanup on component destroy

B Faster event handling

C Works only on mobile devices

D No need to write event handler functions

svelte:window automatically removes listeners when the component is removed, preventing memory leaks.

Which of these is a valid way to listen to the window's resize event?

A <window:resize={handleResize} />

B <window onResize={handleResize} />

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

D <svelte:window onResize={handleResize} />

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

Explain how to use svelte:window to listen for window events and bind window properties.

Think about how you handle events and keep variables updated with window size.

Describe the advantages of using svelte:window compared to adding window event listeners manually.

Consider what happens when components are removed and how cleanup is handled.