on:click on:input on:submit
DOM olay dinleyicilerini doğrudan Svelte şablon söz dizimine ekleyin.
on:click on:input on:submit, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Olay Yönergeleri
Bir dinleyici eklemek için on: ifadesinin ardından DOM olayının adını kullanın.
<button on:click={handleClick}>Click</button>Satır İçi İşleyiciler
Satır içi mantık için ok işlevi aktarın.
<button on:click={() => count++}>+</button>Adlandırılmış İşleyiciler
Bir işlevi betikte tanımlayın ve ona adıyla başvurun.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Olay Nesnesini Alma
İşleyici, yerel Event nesnesini bağımsız değişken olarak alır.
function onChange(e) { value = e.target.value; }on:input
Kullanıcı bir metin alanına her yazdığında input olayı tetiklenir.
<input on:input={(e) => text = e.target.value} />on:submit
Gönderimi işlemek için bir <form> öğesine ekleyin. Varsayılan davranışı engellemek için değiştiricileri kullanın.
<form on:submit|preventDefault={save}>...</form>on:keydown
Girdi alanlarında veya belge genelinde klavye olaylarını dinleyin.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change ve on:input
Kullanıcı düzenlemeyi bitirdiğinde change olayı tetiklenir; input ise her tuş vuruşunda tetiklenir.
Fare Olayları
Standart DOM fare olaylarının tümü çalışır: mouseenter, mouseleave, mousemove.
Dokunma Olayları
touchstart gibi mobil dokunma olayları da aynı şekilde desteklenir.
<div on:touchstart={start} on:touchend={end}>Birden Çok Dinleyici
Farklı olaylar için aynı öğeye birden çok on: yönergesi ekleyebilirsiniz.
<button on:click={a} on:focus={b}>...</button>Hızlı Kontrol
Tıklama işleyicisi hangi söz dizimiyle eklenir?
Özet
Herhangi bir DOM olayı için on:event yönergelerini kullanın. İşleyici satır içinde yazılabilir veya adlandırılmış bir işlev olabilir ve Event alır.
Sıkça Sorulan Sorular
“on:click on:input on:submit” dersi ücretsiz mi?
Evet — “on:click on:input on:submit” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“on:click on:input on:submit” dersinde ne öğreneceğim?
DOM olay dinleyicilerini doğrudan Svelte şablon söz dizimine ekleyin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“on:click on:input on:submit” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- on:click on:input on:submit
- Olay Değiştiricileri: preventDefault stopPropagation once
- createEventDispatcher ile Özel Olaylar
- on:click ile Olay İletme