Default actions in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a default action in Svelte event handling?

A default action is the browser's built-in behavior that happens when an event occurs, like submitting a form or following a link when clicked.

beginner

How do you prevent a default action in Svelte?

You can prevent a default action by adding |preventDefault modifier to the event handler, like on:submit|preventDefault.

beginner

What happens if you don't prevent the default action on a form submit in Svelte?

The browser will reload the page or navigate away, which usually interrupts your app's behavior.

intermediate

Can you combine multiple event modifiers in Svelte? Give an example with default action prevention.

Yes, you can combine modifiers like on:click|preventDefault|stopPropagation to prevent default action and stop event bubbling.

beginner

Why is it important to handle default actions properly in Svelte apps?

Handling default actions properly keeps your app in control of user interactions, avoids unwanted page reloads, and improves user experience.

Which Svelte event modifier prevents the browser's default action?

A |preventDefault

B |stopPropagation

C |capture

D |once

The |preventDefault modifier stops the browser's default behavior for the event.

What is the default action when a form is submitted without preventing it?

A The form data is logged to console

B Nothing happens

C The page reloads or navigates away

D The form resets automatically

Submitting a form normally causes the browser to reload or navigate, which can interrupt your app.

How do you write a click event handler in Svelte that prevents default and stops propagation?

A on:click.preventDefault.stop

B on:click|preventDefault|stopPropagation

C on:click.preventDefault.stopPropagation

D on:click.prevent|stop

Svelte uses pipe-separated modifiers like |preventDefault and |stopPropagation together.

If you want a link not to navigate when clicked, what should you do in Svelte?

A Add on:click|preventDefault to the link

B Remove the href attribute

C Use on:click without modifiers

D Use on:click|stopPropagation only

Using |preventDefault on the click event stops the browser from following the link.

What does the |stopPropagation modifier do in Svelte event handling?

A Captures the event before it reaches the target

B Prevents the default browser action

C Runs the event handler only once

D Stops the event from bubbling up to parent elements

|stopPropagation stops the event from moving up the DOM tree to parent elements.

Explain what default actions are in Svelte and how you can control them.

Think about what happens when you submit a form or click a link in the browser.

Describe how to combine event modifiers in Svelte to prevent default actions and stop event propagation.

Modifiers are added with pipes | after the event name.