on:click on:input on:submit
Pasang pemantau peristiwa DOM langsung dalam sintaks template Svelte.
on:click on:input on:submit adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Direktif Peristiwa
Gunakan on: diikuti nama peristiwa DOM untuk memasang pemantau.
<button on:click={handleClick}>Click</button>Penangan Sebaris
Teruskan fungsi panah untuk logika sebaris.
<button on:click={() => count++}>+</button>Penangan Bernama
Definisikan fungsi dalam skrip dan rujuk fungsi tersebut berdasarkan namanya.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Menerima Objek Peristiwa
Penangan menerima Event bawaan sebagai argumennya.
function onChange(e) { value = e.target.value; }on:input
Peristiwa input dipicu setiap kali pengguna mengetik di bidang teks.
<input on:input={(e) => text = e.target.value} />on:submit
Pasang pada <form> untuk menangani pengiriman. Gunakan pengubah untuk mencegah perilaku bawaan.
<form on:submit|preventDefault={save}>...</form>on:keydown
Dengarkan peristiwa papan ketik pada input atau secara global pada dokumen.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change vs on:input
Peristiwa change dipicu ketika pengguna selesai mengedit; input dipicu pada setiap ketukan tombol.
Peristiwa Tetikus
Semua peristiwa tetikus DOM standar dapat digunakan: mouseenter, mouseleave, mousemove.
Peristiwa Sentuhan
Peristiwa sentuhan seluler seperti touchstart juga didukung dengan cara yang sama.
<div on:touchstart={start} on:touchend={end}>Beberapa Pendengar
Anda dapat memasang beberapa direktif on: pada elemen yang sama untuk peristiwa yang berbeda.
<button on:click={a} on:focus={b}>...</button>Pemeriksaan Singkat
Sintaks apa yang memasang penangan klik?
Ringkasan
Gunakan direktif on:event untuk peristiwa DOM apa pun. Penangan dapat ditulis secara langsung atau berupa fungsi bernama, dan menerima objek peristiwa.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “on:click on:input on:submit” gratis?
Ya — teks lengkap “on:click on:input on:submit” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “on:click on:input on:submit”?
Pasang pemantau peristiwa DOM langsung dalam sintaks template Svelte. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “on:click on:input on:submit” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- on:click on:input on:submit
- Pengubah Peristiwa: preventDefault stopPropagation once
- Peristiwa Kustom dengan createEventDispatcher
- Meneruskan Peristiwa dengan on:click