svelte:body for body events - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for a click event on the whole page using svelte:body.

Svelte

<svelte:body on:[1]={handleClick} />

Drag options to blanks, or click blank then click option'

Aclick

Bmouseover

Ckeydown

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'submit' instead of 'click' for a click event.

Using 'keydown' which listens for keyboard presses, not mouse clicks.

The svelte:body tag listens to events on the entire page body. To detect clicks anywhere, use on:click.

2fill in blank

medium

Complete the code to listen for a keydown event on the whole page using svelte:body.

Svelte

<svelte:body on:[1]={handleKeydown} />

Drag options to blanks, or click blank then click option'

Afocus

Bclick

Ckeydown

Dkeyup

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' which listens for mouse clicks, not keyboard events.

Using 'focus' which listens for element focus, not key presses.

To listen for keyboard key presses on the entire page, use on:keydown with svelte:body.

3fill in blank

hard

Fix the error in the code to correctly listen for a scroll event on the whole page using svelte:body.

Svelte

<svelte:body on:[1]={handleScroll} />

Drag options to blanks, or click blank then click option'

Awheel

Bscroll

Cscrolling

Dmove

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scrolling' which is not a valid event name.

Using 'move' which is unrelated to scrolling.

The correct event name for detecting page scroll is scroll. 'scrolling' and 'move' are not valid event names.

4fill in blank

hard

Fill both blanks to listen for mouseenter and mouseleave events on the whole page using svelte:body.

Svelte

<svelte:body on:[1]={handleEnter} on:[2]={handleLeave} />

Drag options to blanks, or click blank then click option'

Amouseenter

Bmouseleave

Cmouseover

Dmouseout

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'mouseover' with 'mouseenter' which behave differently.

Using 'mouseout' instead of 'mouseleave' which have subtle differences.

Use mouseenter and mouseleave to detect when the mouse enters or leaves the page body.

5fill in blank

hard

Fill all three blanks to listen for keydown, click, and scroll events on the whole page using svelte:body.

Svelte

<svelte:body on:[1]={handleKeydown} on:[2]={handleClick} on:[3]={handleScroll} />

Drag options to blanks, or click blank then click option'

Akeydown

Bclick

Cscroll

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'focus' which does not detect these events.

Mixing up event names or using invalid ones.

Use keydown, click, and scroll events with svelte:body to listen for keyboard, mouse click, and page scroll events respectively.