DOM event listeners (on:click) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does on:click do in Svelte?

on:click listens for a click event on an element and runs the specified code or function when the element is clicked.

beginner

How do you attach a click event listener to a button in Svelte?

Use on:click inside the button tag like this: <button on:click={handleClick}>Click me</button>.

intermediate

Can you use inline code with on:click in Svelte? Give an example.

Yes, you can write inline code directly: <button on:click={() => alert('Clicked!')}>Click</button>.

intermediate

What happens if you add multiple on:click handlers to the same element in Svelte?

Svelte will run all the handlers in the order they appear when the element is clicked.

beginner

Why is using on:click better than adding event listeners manually in Svelte?

Because on:click is declarative, simpler, and Svelte automatically cleans up listeners when components are removed, preventing bugs.

What is the correct way to listen for a click event on a button in Svelte?

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

B <button onclick='handleClick()'>Click me</button>

C <button listen:click={handleClick}>Click me</button>

D <button @click={handleClick}>Click me</button>

In Svelte, on:click is the correct syntax to listen for click events.

What does on:click={() => alert('Hi')} do?

A Does nothing

B Runs alert('Hi') immediately on page load

C Runs alert('Hi') when the element is clicked

D Prevents the click event

This syntax runs the alert only when the element is clicked.

Can you attach more than one on:click handler to the same element in Svelte?

A No, only one handler is allowed

B No, it causes an error

C Yes, but only the first runs

D Yes, all handlers run in order

Svelte runs all attached on:click handlers in the order they appear.

What is a benefit of using on:click in Svelte over manual event listeners?

A Automatic cleanup when component unmounts

B It uses less memory

C It disables other events

D It works only on buttons

Svelte automatically removes event listeners when components are removed, avoiding memory leaks.

Which of these is NOT a valid way to write a click handler in Svelte?

A <button on:click={() =&gt; doSomething()}>Click</button>

B <button on:click='doSomething()'>Click</button>

C <button on:click={doSomething}>Click</button>

D <button on:click={() =&gt; alert('Hi')}>Click</button>

Using quotes with on:click like in option A is not valid in Svelte.

Explain how to use on:click in Svelte to run a function when a button is clicked.

Think about how you tell Svelte to listen for clicks.

Describe the advantages of using on:click in Svelte compared to adding event listeners manually.

Consider what happens when components are removed.