Inline event handlers in Svelte - Step-by-Step Execution

Concept Flow - Inline event handlers

User action triggers event

↓

Inline event handler runs

↓

Event handler code executes

↓

Component state updates or side effects

↓

Component re-renders if state changed

When a user interacts with an element, the inline event handler runs the specified code immediately, which can update state or cause side effects, then the component updates if needed.

Execution Sample

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicked {count} times
</button>

A button with an inline click event handler that increases the count each time it is clicked.

Execution Table

Step	Event	State Before	Action	State After	Rendered Output
1	Initial render	count = 0	Render button	count = 0	Button shows: Clicked 0 times
2	User clicks button	count = 0	Run inline handler: count += 1	count = 1	Button shows: Clicked 1 times
3	User clicks button	count = 1	Run inline handler: count += 1	count = 2	Button shows: Clicked 2 times
4	User clicks button	count = 2	Run inline handler: count += 1	count = 3	Button shows: Clicked 3 times
5	No more clicks	count = 3	No action	count = 3	Button shows: Clicked 3 times

💡 No more user clicks, so no further state changes or re-renders.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
count	0	1	2	3	3

Key Moments - 3 Insights

Why does the button text update immediately after clicking?

Because the inline event handler updates the 'count' variable, which triggers Svelte to re-render the component with the new value, as shown in execution_table rows 2-4.

Can the inline event handler run multiple statements?

Yes, you can use a block like {() => { count += 1; console.log(count); }} but each statement runs immediately on the event, similar to the single statement shown in the example.

What happens if the event handler does not change any state?

If no state changes, Svelte does not re-render the component, so the output stays the same, as seen in execution_table row 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the second click event?

A 1

B 2

C 3

D 0

💡 Hint

Check the 'State After' column for step 3 in the execution_table.

At which step does the button text first show 'Clicked 3 times'?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Rendered Output' column in the execution_table for when count equals 3.

If the inline handler was changed to 'count += 2', what would be the 'count' after the first click?

A 2

B 1

C 3

D 0

💡 Hint

Think about how the inline handler changes 'count' on each click, referencing variable_tracker.

Concept Snapshot

Inline event handlers in Svelte use on:event syntax.
Example: <button on:click={() => count += 1}>.
They run code immediately on event.
State changes trigger re-render.
Use for quick, simple event logic.

Full Transcript

This example shows a Svelte button with an inline click event handler that increases a count variable each time the button is clicked. Initially, count is zero and the button shows 'Clicked 0 times'. When the user clicks the button, the inline handler runs, adding one to count. This updates the component state, causing Svelte to re-render the button text with the new count. This process repeats for each click. If no clicks happen, the state and output remain unchanged. Inline event handlers let you write quick code directly in the markup to respond to user actions and update the UI immediately.