Event modifiers (preventDefault, stopPropagation) in Svelte - Mini Project: Build & Apply

Event modifiers (preventDefault, stopPropagation) in Svelte

📖 Scenario: You are building a simple web page with a form and a button inside it. You want to control how clicks and form submissions behave to improve user experience.

🎯 Goal: Build a Svelte component that uses event modifiers preventDefault and stopPropagation to manage form submission and button clicks properly.

📋 What You'll Learn

Create a Svelte component with a form and a button inside it

Use preventDefault modifier on the form submission event to stop the page from reloading

Use stopPropagation modifier on the button click event to prevent the click from bubbling up to the form

Show a message when the form is submitted and when the button is clicked

💡 Why This Matters

🌍 Real World

Forms and buttons are common in web apps. Controlling their events improves user experience by preventing unwanted page reloads and managing event flow.

💼 Career

Understanding event modifiers is essential for frontend developers to build interactive and user-friendly web interfaces using Svelte.

1

Set up the form and button elements

Create a Svelte component with a <form> element containing a <button> element. Add two variables formMessage and buttonMessage initialized as empty strings.

Svelte

  // Your code here



  Click me


{formMessage}
{buttonMessage}

Need a hint?

Start by declaring two variables formMessage and buttonMessage as empty strings. Then create a form with a button inside.

2

Add form submission handler with preventDefault

Add a submit event handler to the <form> element using the on:submit|preventDefault modifier. Inside the handler, set formMessage to the string "Form submitted!".

Svelte

  let formMessage = "";
  let buttonMessage = "";



  Click me


{formMessage}
{buttonMessage}


  // Your code here

Need a hint?

Use on:submit|preventDefault on the form and create a function handleSubmit that sets formMessage.

3

Add button click handler with stopPropagation

Add a click event handler to the <button> element using the on:click|stopPropagation modifier. Inside the handler, set buttonMessage to the string "Button clicked!".

Svelte

  let formMessage = "";
  let buttonMessage = "";

  function handleSubmit() {
    formMessage = "Form submitted!";
  }

  // Your code here



  Click me


{formMessage}
{buttonMessage}

Need a hint?

Add on:click|stopPropagation to the button and create a handleClick function that sets buttonMessage.

4

Complete the component with proper event modifiers

Ensure the <form> uses on:submit|preventDefault={handleSubmit} and the <button> uses on:click|stopPropagation={handleClick}. The component should show messages when the form is submitted or the button is clicked without page reload or event bubbling.

Svelte

Need a hint?

Check that the form and button have the correct event modifiers to prevent default submission and stop event bubbling.