Event modifiers (preventDefault, stopPropagation) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the preventDefault event modifier do in Svelte?

It stops the browser's default action for an event, like preventing a link from navigating or a form from submitting.

beginner

How does the stopPropagation event modifier affect event handling in Svelte?

It stops the event from bubbling up to parent elements, so only the current element handles the event.

intermediate

How do you use preventDefault and stopPropagation together in a Svelte event?

Add both modifiers to the event handler like on:click|preventDefault|stopPropagation to stop default action and prevent bubbling.

beginner

Why might you want to use preventDefault on a form submit event in Svelte?

To stop the page from reloading so you can handle the form data with JavaScript instead.

intermediate

What happens if you don’t use stopPropagation on a nested clickable element in Svelte?

The click event will bubble up and trigger click handlers on parent elements too, which might cause unwanted behavior.

What does on:click|preventDefault do in Svelte?

A Triggers the click event twice

B Stops the event from bubbling up

C Stops the default browser action for the click event

D Delays the click event

The preventDefault modifier stops the browser's default action, like following a link.

Which event modifier stops an event from bubbling up to parent elements?

A stopPropagation

B preventDefault

C capture

D once

stopPropagation prevents the event from moving up the DOM tree.

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

A on:click.preventDefault stopPropagation

B on:click|preventDefault|stopPropagation

C on:click.preventDefault, stopPropagation

D on:click.preventDefault.stopPropagation

Modifiers are chained with pipes: on:click|preventDefault|stopPropagation.

Why use preventDefault on a form submit event?

A To disable the submit button

B To submit the form twice

C To clear the form fields

D To stop the page from reloading

Preventing default stops the browser from reloading the page on submit.

If you don’t use stopPropagation on a nested button click, what happens?

A The event bubbles and parent handlers also run

B Only the button’s click handler runs

C The event is canceled

D The button is disabled

Without stopPropagation, events bubble up and trigger parent handlers.

Explain how preventDefault and stopPropagation modifiers work in Svelte event handling.

Think about what happens when you click a link or button inside nested elements.

Describe a real-life scenario where you would use both preventDefault and stopPropagation in a Svelte app.

Imagine a form inside a clickable card where you want to handle submit and clicks separately.