Events

React invented synthetic events with camelCase handler props (onClick, onChange, onSubmit). Svelte 5 drops the special syntax entirely — event handlers are just lowercase HTML attributes, the same names the browser uses (onclick, oninput, onsubmit). If you know how to write an onclick attribute in a plain HTML file, you already know Svelte events.

Click handler

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Count: {count}
</button>

Key points:

React: onClick (capital O, capital C). Svelte 5: onclick (all lowercase).
React needs a setter function from useState. Svelte 5 mutates $state directly — count++ just works.
In Svelte 5 the old on:click directive from Svelte 4 is gone. Always use lowercase onclick.

Named handler functions

Inline arrow functions are fine for simple cases. Extract to a named function for readability:

function Form() {
  const [value, setValue] = React.useState('');
  function handleChange(e) {
    setValue(e.target.value);
  }
  return <input value={value} onChange={handleChange} />;
}

<script>
  let value = $state('');
  function handleInput(e) {
    value = e.target.value;
  }
</script>

<input {value} oninput={handleInput} />

Note: for two-way binding of inputs, bind:value is cleaner (covered in the Bindings lesson). The named handler pattern is shown here because it maps directly to the React onChange pattern.

The event object

You have full access to the native DOM event — no synthetic wrapper:

function KeyLogger() {
  const [key, setKey] = React.useState('');
  return (
    <input
      onKeyDown={e => setKey(e.key)}
      placeholder="Press a key"
    />
  );
}

<script>
  let key = $state('');
</script>

<input
  onkeydown={e => (key = e.key)}
  placeholder="Press a key"
/>
{#if key}
  <p>Last key: <kbd>{key}</kbd></p>
{/if}

Try it: interactive counter

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let count = $state(0);
  function increment() { count++; }
  function decrement() { count--; }
  function reset() { count = 0; }
</script>

<div class="row">
  <button onclick={decrement}>-</button>
  <span class="count">{count}</span>
  <button onclick={increment}>+</button>
</div>
<button class="reset" onclick={reset}>Reset</button>

<style>
  .row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
  .count { font-size: 2rem; font-weight: bold; min-width: 2rem; text-align: center; }
  button { font-size: 1.2rem; padding: 0.3rem 0.8rem; cursor: pointer; }
  .reset { font-size: 0.9rem; padding: 0.2rem 0.6rem; }
</style>