Event Handling Svelte — Svelte

Svelte menggunakan on: directive untuk menangani event. Event Dasar let count = 0 count += 1}>+1 count -= 1}>-1 Count: {count} Named Handler function…

Event handling artinya menjalankan kode saat sesuatu terjadi di halaman: tombol diklik, form dikirim, atau tombol keyboard ditekan. Di Svelte 4 caranya pakai directive on:. Bayangin bel di meja kasir Warung Bu Sri. Begitu bel dipencet, kasir datang. on:click memasang bel seperti itu di sebuah elemen: setiap elemen itu diklik, function yang kamu berikan dijalankan. Modifier seperti |once dan |preventDefault adalah catatan kecil di samping bel, misalnya "cuma sekali" atau "jangan lakukan kebiasaan bawaannya".

🧪 Tebakan cepat: form pesanan ditulis <form on:submit={kirim}> dengan tombol Pesan. kirim() menjalankan dikirim += 1, dan halaman menampilkan Pesanan terkirim: {dikirim}. Setelah tombol Pesan diklik, yang tampil Pesanan terkirim: 1, atau angkanya kembali 0? Jawabannya ada di bagian "Modifier: |preventDefault dan |once".

on:click: jalankan function saat diklik

<script>
  let porsi = 0
</script>

<button on:click={() => porsi += 1}>+1</button>
<button on:click={() => porsi -= 1}>-1</button>
<p>Es Teh: {porsi} porsi</p>

Kejadian	`porsi`	Tampil
Awal	0	Es Teh: 0 porsi
Klik +1	1	Es Teh: 1 porsi
Klik -1 dua kali	-1	Es Teh: -1 porsi

on: lalu nama event-nya, click, lalu function yang dijalankan di dalam kurung kurawal.
() => porsi += 1 adalah arrow function yang ditulis langsung di tempat (inline). Assignment di dalamnya memperbarui tampilan, seperti di pelajaran Reaktivitas.
Latihannya sama persis, dengan nama count dan paragraf Count: {count}. Teks tombolnya harus persis +1 dan -1, karena penguji mencari tombol dari teksnya.

Function bernama dan objek event

Handler yang lebih panjang lebih rapi ditulis sebagai function di <script>:

<script>
  let porsi = 0

  function tambah() {
    porsi += 1
  }

  function catat(event) {
    console.log("diklik:", event.target.textContent)
  }
</script>

<button on:click={tambah}>+1</button>
<button on:click={catat}>Catat</button>

Tulis nama function-nya saja, {tambah}, tanpa tanda kurung. Svelte yang memanggilnya setiap kali tombol diklik.
Svelte mengirim objek event sebagai argumen pertama. event.target adalah elemen yang diklik, jadi klik Catat mencetak diklik: Catat di console.
on:click={tambah()} (dengan kurung) itu beda. Di Svelte 4, tambah() langsung dijalankan sekali saat komponen dibuat, jadi porsi sudah 1 sebelum ada yang mengklik. Yang dipasang sebagai pendengar adalah hasil tambah(), yaitu undefined, jadi kliknya gak melakukan apa-apa.

Modifier: |preventDefault dan |once

Modifier ditulis setelah nama event, dipisah garis tegak |:

<script>
  let dikirim = 0
  let diskon = 0

  function kirim() {
    dikirim += 1
  }
</script>

<form on:submit|preventDefault={kirim}>
  <button>Pesan</button>
</form>
<p>Pesanan terkirim: {dikirim}</p>

<button on:click|once={() => diskon += 2000}>Klaim promo</button>
<p>Diskon: Rp {diskon}</p>

Tanpa |preventDefault, angkanya kembali 0. Itu jawaban tebakannya. Kebiasaan bawaan (default behavior) browser saat form dikirim adalah mengirim isinya lalu memuat ulang halaman. kirim() memang sempat jalan, tapi halamannya langsung dimuat ulang, dan semua state kembali ke awal.

Ditulis	Yang terjadi
`on:submit={kirim}`	`kirim()` jalan, lalu halaman dimuat ulang, `Pesanan terkirim: 0`
`on:submit\|preventDefault={kirim}`	`event.preventDefault()` dipanggil dulu, lalu `kirim()`: `Pesanan terkirim: 1`
`on:click\|once={...}`	Klik pertama: diskon 2000. Klik kedua: tetap 2000, pendengarnya sudah dilepas

|preventDefault sama dengan memanggil event.preventDefault() di awal handler-mu.
|once melepas pendengarnya setelah jalan sekali.
Modifier bisa disambung: on:click|preventDefault|once={...}.
Modifier lain: |stopPropagation (event gak diteruskan ke elemen induk), |self (cuma kalau yang diklik elemen itu sendiri, bukan anaknya), |capture, |passive, |nonpassive, dan |trusted.

Event lain

on: bisa dipasang untuk event DOM apa pun: on:input, on:submit, on:keydown, on:mouseenter, dan seterusnya.

<input on:keydown={(event) => event.key === "Enter" && kirim()} />

Nama event ditulis huruf kecil, sama seperti di addEventListener. on:Click mendengarkan event bernama Click, yang gak pernah dikirim browser, jadi tombolnya diam.

📌 Event dari komponen

Komponen buatanmu juga bisa mengirim event sendiri, misalnya <MenuItem on:pesan={catatPesanan} />. Anaknya mengirim event itu dengan createEventDispatcher. Caranya dibahas di pelajaran Component Events.

Svelte 5: onclick

Di Svelte 5 dengan runes, event ditulis sebagai atribut biasa, tanpa titik dua:

<script>
  let porsi = $state(0)
  let dikirim = $state(0)

  function kirim(event) {
    event.preventDefault()
    dikirim += 1
  }
</script>

<button onclick={() => porsi += 1}>+1</button>
<form onsubmit={kirim}>
  <button>Pesan</button>
</form>

Gak ada modifier. onclick|once ditolak compiler ('onclick|once' is not a valid attribute name), jadi panggil event.preventDefault() sendiri, dan tulis sendiri logika "cuma sekali".
on:click masih jalan di Svelte 5, tapi di komponen runes compiler memberi peringatan bahwa cara itu sudah usang.
Di editor latihan, onclick tanpa $state di-compile dengan Svelte 4 sebagai atribut teks biasa, dan tombolnya diam. Latihannya juga mencari on:click, jadi tulis gaya Svelte 4.

⚠️ Jebakan yang sering ketemu

on:click={tambah()}. Function-nya jalan sekali saat komponen dibuat, lalu kliknya gak berbuat apa-apa. Tulis {tambah} atau {() => tambah()}.
Form tanpa |preventDefault. Halaman dimuat ulang dan state hilang. Pakai on:submit|preventDefault.
onclick di editor latihan. Tanpa $state, tombolnya diam. Tulis on:click.
Teks tombol yang gak persis. Penguji mengklik tombol yang teksnya persis +1 atau -1. + 1 atau Tambah gak ketemu.

TL;DR: on:click={handler} menjalankan handler setiap elemen diklik; tulis function-nya ({tambah} atau {() => count += 1}), jangan memanggilnya ({tambah()}). Svelte mengirim objek event ke handler. Modifier ditulis setelah |: |preventDefault mencegah form memuat ulang halaman, |once melepas pendengar setelah sekali jalan, dan modifier bisa disambung. on: berlaku untuk event DOM apa pun, dengan nama huruf kecil. Event dari komponen buatanmu memakai createEventDispatcher (pelajaran Component Events). Di Svelte 5 event ditulis onclick={...} tanpa modifier. Latihannya: tombol +1 dan -1 dengan on:click, dan <p>Count: {count}</p> yang berubah dari Count: 0 jadi Count: 1 atau Count: -1.