Event modifiers (preventDefault, stopPropagation) in Svelte - Step-by-Step Execution

Concept Flow - Event modifiers (preventDefault, stopPropagation)

User triggers event

↓

Svelte event handler

↓

Check for modifiers

↓

Handler code runs

↓

Event ends

When an event happens, Svelte checks if modifiers like preventDefault or stopPropagation are used. It applies them before running your handler code.

Execution Sample

Svelte

<button on:click|preventDefault|stopPropagation={handleClick}>Click me</button>

<script>
  function handleClick() {
    console.log('Clicked!');
  }
</script>

A button click event uses both preventDefault and stopPropagation modifiers before running the click handler.

Execution Table

Step	Event Triggered	Modifiers Checked	Action Taken	Handler Runs	Console Output
1	User clicks button	preventDefault? Yes	Default action prevented	No	No output yet
2	Same click event	stopPropagation? Yes	Event bubbling stopped	No	No output yet
3	Modifiers applied	Proceed to handler	No further default or bubbling	Yes	Clicked!
4	Event processing ends	No more modifiers	No more actions	No	No further output

💡 All modifiers applied, handler executed, event processing stops.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
event.defaultPrevented	false	true	true	true	true
event.propagationStopped	false	false	true	true	true
handlerExecuted	false	false	false	true	true

Key Moments - 2 Insights

Why does preventDefault stop the browser's default action but the handler still runs?

Because preventDefault only stops the default browser behavior (like following a link), but the event handler code still executes as shown in execution_table step 3.

What does stopPropagation do to the event flow?

stopPropagation stops the event from bubbling up to parent elements, so no other handlers on ancestors run. This is shown in execution_table step 2 where bubbling is stopped before the handler runs.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of event.defaultPrevented after step 1?

A true

B false

C undefined

D null

💡 Hint

Check variable_tracker row for event.defaultPrevented after Step 1

At which step does the event handler actually run?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table column 'Handler Runs'

If stopPropagation was removed, what would change in the execution?

A The default action would not be prevented

B The handler would not run

C The event would bubble to parent elements

D The event would be canceled

💡 Hint

Refer to the meaning of stopPropagation in key_moments and execution_table step 2

Concept Snapshot

Svelte event modifiers let you control event behavior easily.
|preventDefault| stops browser default actions.
|stopPropagation| stops event bubbling to parents.
Modifiers run before your handler code.
Use them by adding |modifier after event name.
Example: on:click|preventDefault|stopPropagation={handler}

Full Transcript

In Svelte, when you add event modifiers like preventDefault or stopPropagation to an event handler, Svelte first applies these modifiers before running your handler function. preventDefault stops the browser's default action, like following a link or submitting a form. stopPropagation stops the event from bubbling up to parent elements, so no other handlers on ancestors run. The execution table shows the event triggered, modifiers checked and applied, and then the handler runs. Variables track that defaultPrevented and propagationStopped flags change accordingly. This helps you control exactly how events behave in your app.