Sveltejs Academy · Pelajaran

Pengubah Peristiwa: preventDefault stopPropagation once

Gunakan pengubah yang dipisahkan tanda pipa untuk mengubah perilaku peristiwa tanpa kode tambahan.

Pelajaran 2 dari 413 langkah

Pengubah Peristiwa: preventDefault stopPropagation once adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Sintaks Pengubah

Tambahkan pengubah ke nama peristiwa dengan karakter pipa.

<form on:submit|preventDefault={save}>

preventDefault

Memanggil event.preventDefault() sebelum penangan Anda dijalankan. Anda tidak perlu melakukannya secara manual.

stopPropagation

Memanggil event.stopPropagation() untuk mencegah peristiwa merambat ke atas.

<div on:click|stopPropagation={inner}>

Sekali

Penangan dihapus setelah pemanggilan pertama. Berguna untuk peristiwa penyiapan satu kali.

<button on:click|once={track}>Buy</button>

Pasif

Menandai pendengar sebagai pasif, sehingga memberi tahu peramban bahwa pendengar tersebut tidak akan memanggil preventDefault. Meningkatkan kinerja pengguliran.

<div on:touchstart|passive={start}>

Penangkapan

Menjalankan penangan selama fase penangkapan, bukan fase perambatan.

Elemen Itu Sendiri

Hanya dijalankan ketika target peristiwa adalah elemen itu sendiri, bukan elemen anak.

<div on:click|self={close}>

Tidak Pasif

Memaksa peristiwa yang secara bawaan bersifat pasif menjadi tidak pasif agar Anda dapat memanggil preventDefault pada peristiwa tersebut.

Tepercaya

Hanya dijalankan untuk peristiwa yang dipicu oleh masukan pengguna, bukan oleh skrip.

Menggabungkan Pengubah

Rangkai beberapa pengubah dengan karakter pipa.

<a on:click|preventDefault|stopPropagation={go}>Click</a>

Alasan Menggunakan Pengubah

Pengubah membuat penangan tetap berfokus pada logika bisnis dan menghilangkan kode berulang.

Pemeriksaan Singkat

Apa yang dilakukan oleh |once?

Ringkasan

Pengubah seperti preventDefault, stopPropagation, once, dan passive menyederhanakan penyesuaian peristiwa yang umum.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
41
Pelajaran
163

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengubah Peristiwa: preventDefault stopPropagation once” gratis?

Ya — teks lengkap “Pengubah Peristiwa: preventDefault stopPropagation once” 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 “Pengubah Peristiwa: preventDefault stopPropagation once”?

Gunakan pengubah yang dipisahkan tanda pipa untuk mengubah perilaku peristiwa tanpa kode tambahan. 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 2 dari 4.

Berapa lama pelajaran “Pengubah Peristiwa: preventDefault stopPropagation once” 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

  1. on:click on:input on:submit
  2. Pengubah Peristiwa: preventDefault stopPropagation once
  3. Peristiwa Kustom dengan createEventDispatcher
  4. Meneruskan Peristiwa dengan on:click
← Kembali ke Sveltejs Academy