Inline event handlers in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an inline event handler in Svelte?

An inline event handler in Svelte is a way to attach a function directly to an HTML element's event attribute using the on:event syntax inside the component's markup.

beginner

How do you write a click event handler inline in Svelte?

You write it like this: <button on:click={handleClick}>Click me</button>, where handleClick is a function defined in the script part of the component.

intermediate

Can you pass arguments directly in an inline event handler in Svelte? How?

Yes, by using an inline arrow function: on:click={() => handleClick(arg)}. This way you call handleClick with arguments when the event happens.

intermediate

What happens if you write on:click={handleClick()} instead of on:click={handleClick}?

Writing on:click={handleClick()} calls the function immediately during rendering, not on the click event. You want to pass the function itself without parentheses to run it only when clicked.

beginner

Why are inline event handlers useful in Svelte?

They keep event logic close to the element, making code easier to read and maintain. They also leverage Svelte's reactive system for efficient updates.

How do you attach a click event handler inline in Svelte?

A <button onclick='handleClick()'>Click</button>

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

C <button onClick={handleClick}>Click</button>

D <button on-click={handleClick}>Click</button>

Svelte uses the syntax on:event with lowercase event names and curly braces for functions.

What is the correct way to pass an argument to an inline event handler in Svelte?

A on:click={handleClick(arg)}

B on:click={handleClick.call(arg)}

C on:click={() => handleClick(arg)}

D on:click={handleClick}

Using an arrow function lets you pass arguments without calling the function immediately.

What happens if you write on:click={handleClick()} in Svelte?

A It causes a syntax error.

B The function runs only when clicked.

C The function never runs.

D The function runs immediately during render.

Parentheses call the function immediately instead of passing it as a handler.

Which of these is NOT a benefit of inline event handlers in Svelte?

A Automatically preventing default browser behavior.

B Making code easier to read.

C Keeping event logic close to elements.

D Leveraging Svelte's reactive updates.

Inline handlers do not automatically prevent default behavior; you must do that explicitly.

How do you prevent the default action in an inline event handler in Svelte?

A on:click|preventDefault={handleClick}

B on:click={event.preventDefault(); handleClick()}

C on:click={handleClick.preventDefault()}

D on:click={handleClick} preventDefault

Svelte provides modifiers like |preventDefault to handle this cleanly.

Explain how to write an inline click event handler in Svelte and how to pass arguments to it.

Think about how to keep the function from running immediately.

Describe common mistakes when using inline event handlers in Svelte and how to avoid them.

Focus on function calls and syntax.