Default actions in Svelte - Step-by-Step Execution

Concept Flow - Default actions

User Event Occurs

↓

Browser Checks for Default Action

↓

Svelte Event Handler Runs

↓

Calls event.preventDefault()?

↓

Default action prevented

↓

Default action happens

↓

Event Propagation Continues or Stops

When a user event happens, the browser tries to do its default action. Svelte event handlers can stop this by calling event.preventDefault(), which blocks the default action.

Execution Sample

Svelte

function handleClick(event) {
  event.preventDefault();
  alert('Clicked!');
}

<form>
  <button on:click={handleClick}>Click me</button>
</form>

This code prevents the button's default action and shows an alert instead when clicked.

Execution Table

Step	Event	Default Action	Handler Called	event.preventDefault() Called?	Default Action Happens?	Output
1	User clicks button	Button submits form (default)	handleClick called	Yes	No	Alert 'Clicked!' shown
2	User clicks button	Button submits form (default)	No handler	N/A	Yes	Form submits normally
3	User clicks button	Button submits form (default)	handleClick called	No	Yes	Form submits normally

💡 Execution stops after event handler finishes and default action is either prevented or allowed.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
event.preventDefaultCalled	false	true	false	false
defaultActionHappens	true	false	true	true

Key Moments - 2 Insights

Why does calling event.preventDefault() stop the default browser action?

Calling event.preventDefault() tells the browser not to perform its usual action for that event, as shown in execution_table row 1 where the form does not submit.

What happens if you forget to call event.preventDefault() in the handler?

The default action still happens, like submitting a form on button click, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution_table, at step 1, what is the value of event.preventDefault() called?

A N/A

B No

C Yes

D Unknown

💡 Hint

Check the 'event.preventDefault() Called?' column at step 1 in execution_table.

At which step does the default action happen?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the 'Default Action Happens?' column in execution_table.

If you remove event.preventDefault() from the handler, how does the output change?

A Alert still shows and default action prevented

B Alert shows but default action happens too

C No alert and default action happens

D No alert and default action prevented

💡 Hint

Compare rows 1 and 3 in execution_table for handler behavior.

Concept Snapshot

Default actions are browser behaviors triggered by events.
In Svelte, event handlers receive the event object.
Calling event.preventDefault() stops the browser's default action.
Without preventDefault(), default action runs after handler.
Use preventDefault() to control event outcomes.

Full Transcript

When a user interacts with an element, the browser tries to perform a default action, like submitting a form when a button is clicked. In Svelte, event handlers receive an event object. If the handler calls event.preventDefault(), it stops the browser from doing its default action. Otherwise, the default action happens after the handler runs. This lets you control what happens on user events.