DOM event listeners (on:click) in Svelte - Step-by-Step Execution

Concept Flow - DOM event listeners (on:click)

Browser renders element

↓

User clicks element

↓

Event listener (on:click) triggers

↓

Handler function runs

↓

Component state updates?

↓

DOM updates if needed

This flow shows how a click on a DOM element triggers the on:click event listener, which runs a handler and may update the component state and DOM.

Execution Sample

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Click me</button>
<p>{count}</p>

A button increments a counter each time it is clicked, updating the displayed count.

Execution Table

Step	User Action	Event Triggered	Handler Action	State Before	State After	DOM Update
1	Page loads	No	No	count = 0	count = 0	<p>0</p> shown
2	User clicks button	Yes	increment() runs	count = 0	count = 1	<p>1</p> shown
3	User clicks button again	Yes	increment() runs	count = 1	count = 2	<p>2</p> shown
4	No further clicks	No	No	count = 2	count = 2	<p>2</p> shown

💡 No more clicks, so no event triggers and no state changes.

Variable Tracker

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

Key Moments - 3 Insights

Why does the displayed number update after clicking the button?

Because the on:click event triggers the increment function which changes the count variable, causing Svelte to update the DOM as shown in execution_table rows 2 and 3.

What happens if the button is clicked multiple times quickly?

Each click triggers the event listener separately, incrementing count each time and updating the DOM accordingly, as seen in execution_table rows 2 and 3.

Does the DOM update if the count variable does not change?

No, Svelte only updates the DOM when reactive state changes. If count stays the same, no DOM update occurs, as shown in execution_table row 4.

Visual Quiz - 3 Questions

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

A 1

B 0

C 2

D 3

💡 Hint

Check the 'State After' column in row 3 of the execution_table.

At which step does the DOM first update to show '1'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'DOM Update' column in the execution_table for when

1

appears.

If the increment function did not change count, what would happen to the DOM?

A DOM does not update

B DOM updates anyway

C Error occurs

D Button stops working

💡 Hint

Refer to key_moments about DOM updates only on state change and execution_table row 4.

Concept Snapshot

Svelte on:click adds a click event listener to an element.
When clicked, the handler function runs.
If handler changes reactive state, DOM updates automatically.
Use on:click={handler} syntax inside elements.
This enables interactive UI with minimal code.

Full Transcript

This visual trace shows how Svelte handles DOM event listeners using on:click. When the page loads, the count variable is zero and displayed as 0. When the user clicks the button, the on:click event triggers the increment function, which adds 1 to count. Svelte detects this state change and updates the DOM to show the new count. Each click repeats this process, increasing count and updating the display. If no clicks happen, no event triggers and the DOM stays the same. This demonstrates how Svelte connects user actions to reactive state and DOM updates simply and efficiently.

Practice

1. What does the on:click directive do in a Svelte component?

easy

A. It styles the element when clicked.

B. It runs code when the user clicks on the element.

C. It prevents the element from being clicked.

D. It changes the element's text automatically.

Solution

1. Step 1: Understand the purpose of on:click

   The on:click directive listens for click events on an element.

2. Step 2: Identify what happens on click

   When the element is clicked, the code inside the handler runs.

3. Final Answer:

   It runs code when the user clicks on the element. -> Option B

4. Quick Check:

   on:click runs code on click [OK]

Hint: Remember: on:click runs code when clicked [OK]

Common Mistakes:

• Thinking it styles the element automatically
• Believing it disables clicks
• Assuming it changes text without code

2. Which of the following is the correct syntax to run a function handleClick when a button is clicked in Svelte?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Svelte event syntax

   Svelte uses on:eventName={handler} syntax for event listeners.

2. Step 2: Match correct syntax

   on:click={handleClick} is the correct way to attach the click handler.

3. Final Answer:

   <button on:click={handleClick}>Click me</button> -> Option A

4. Quick Check:

   Svelte uses on:eventName syntax [OK]

Hint: Use on:click={function} for click events [OK]

Common Mistakes:

• Using React style onClick instead of on:click
• Swapping event and on keywords
• Using @click which is Vue syntax

3. Given this Svelte code:

 <script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

What will the button display after clicking it 3 times?

medium

A. Clicked 0 times

B. Clicked 1 times

C. Clicked 3 times

D. Clicked NaN times

Solution

1. Step 1: Understand the initial state and function

   The variable count starts at 0. The increment function adds 1 to count each click.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count becomes 0 + 3 = 3.

3. Final Answer:

   Clicked 3 times -> Option C

4. Quick Check:

   count increments by 1 per click [OK]

Hint: Count increases by 1 each click [OK]

Common Mistakes:

• Forgetting to update count on click
• Assuming count resets
• Confusing initial value with updated value

4. What is wrong with this Svelte code snippet?

<button on:click=increment()>Click me</button>
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

medium

A. The function call should be inside curly braces: on:click={increment}

B. The function increment is missing parentheses in the script

C. The count variable should be declared inside the button

D. The on:click event should be written as onClick

Solution

1. Step 1: Check event handler syntax

   In Svelte, event handlers must be assigned a function reference inside curly braces, not called immediately.

2. Step 2: Identify the error

   Using on:click=increment() calls the function immediately instead of on click. Correct is on:click={increment}.

3. Final Answer:

   The function call should be inside curly braces: on:click={increment} -> Option A

4. Quick Check:

   Use on:click={function} not on:click=function() [OK]

Hint: Use curly braces for function references in on:click [OK]

Common Mistakes:

• Calling function immediately instead of passing reference
• Using React style onClick instead of on:click
• Placing variables inside HTML tags incorrectly

5. You want to create a Svelte component with two buttons: one increments a counter, the other resets it to zero. Which code correctly implements this behavior?

hard

A. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button onClick={increment}>Increment</button>
<button onClick={reset}>Reset</button>
<p>Count: {count}</p>

B. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment()}>Increment</button>
<button on:click={reset()}>Reset</button>
<p>Count: {count}</p>

C. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click=increment>Increment</button>
<button on:click=reset>Reset</button>
<p>Count: {count}</p>

D. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment}>Increment</button>
<button on:click={reset}>Reset</button>
<p>Count: {count}</p>

Solution

1. Step 1: Check event handler syntax correctness

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment}>Increment</button>
   <button on:click={reset}>Reset</button>
   <p>Count: {count}</p>

   uses on:click={increment} and on:click={reset}, which is correct Svelte syntax.

2. Step 2: Identify errors in other options

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment()}>Increment</button>
   <button on:click={reset()}>Reset</button>
   <p>Count: {count}</p>

   calls functions immediately, which is wrong.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click=increment>Increment</button>
   <button on:click=reset>Reset</button>
   <p>Count: {count}</p>

   misses curly braces.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button onClick={increment}>Increment</button>
   <button onClick={reset}>Reset</button>
   <p>Count: {count}</p>

   uses React style onClick, invalid in Svelte.

3. Final Answer:

   Correct syntax: on:click={increment} and on:click={reset} -> Option D

4. Quick Check:

   Use on:click={function} with curly braces [OK]

Hint: Pass function references with curly braces in on:click [OK]

Common Mistakes:

• Calling functions immediately in event handlers
• Omitting curly braces around handlers
• Using React event syntax instead of Svelte