SVElte5 Event Handling Bind

Ringkasan

Svelte 5 pakai atribut onclick (bukan on:click) dan prop callback untuk event. bind: tetap ada untuk two-way binding.

Konsep Dasar

• <button onclick={handler}> — event tanpa prefix on:.
• Callback props: <Child onclose={fn} /> (bukan createEventDispatcher).
• bind:value, bind:checked, bind:this tetap berlaku.
• Event modifier via | tidak ada lagi; pakai wrapper atau {...} manually.

Cara Kerja / Struktur

svelte

<script>
  let name = $state("");
  function submit(){ /* ... */ }
</script>
<input bind:value={name} />
<button onclick={submit}>Kirim</button>
<Child ondone={() => console.log("done")} />

Catatan Implementasi

• Di Svelte 5, event handler adalah props biasa → lebih mudah di-type.
• createEventDispatcher masih ada tapi callback props lebih idiomatik.

Kesalahan Umum

• Masih pakai on:click (deprecated di runes mode).
• Lupa bind: → input tidak update state.

Glosarium

• Callback prop: fungsi sebagai prop untuk event.
• Two-way binding: nilai mengalir dua arah (bind).

Referensi

• Svelte Form Handling