on:click on:input on:submit
Dołączaj listenery zdarzeń DOM bezpośrednio w składni szablonów Svelte.
on:click on:input on:submit to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dyrektywy zdarzeń
Użyj on:, a następnie nazwy zdarzenia DOM, aby dołączyć nasłuchiwacz.
<button on:click={handleClick}>Click</button>Procedury obsługi w treści
Przekaż funkcję strzałkową, aby zawrzeć logikę bezpośrednio w szablonie.
<button on:click={() => count++}>+</button>Nazwane procedury obsługi
Zdefiniuj funkcję w skrypcie i odwołuj się do niej po nazwie.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Odbieranie obiektu zdarzenia
Procedura obsługi otrzymuje natywne zdarzenie Event jako argument.
function onChange(e) { value = e.target.value; }on:input
Zdarzenie input jest wywoływane za każdym razem, gdy użytkownik wpisuje tekst w polu tekstowym.
<input on:input={(e) => text = e.target.value} />on:submit
Dołącz je do elementu <form>, aby obsłużyć wysłanie formularza. Użyj modyfikatorów, aby zapobiec domyślnemu działaniu.
<form on:submit|preventDefault={save}>...</form>on:keydown
Nasłuchuj zdarzeń klawiatury na polach wejściowych lub globalnie w dokumencie.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change a on:input
Zdarzenie change jest wywoływane, gdy użytkownik zakończy edycję, natomiast input — po każdym naciśnięciu klawisza.
Zdarzenia myszy
Wszystkie standardowe zdarzenia myszy DOM działają: mouseenter, mouseleave, mousemove.
Zdarzenia dotykowe
Mobilne zdarzenia dotykowe, takie jak touchstart, są obsługiwane w ten sam sposób.
<div on:touchstart={start} on:touchend={end}>Wiele nasłuchiwaczy
Można przypisać wiele dyrektyw on: do tego samego elementu dla różnych zdarzeń.
<button on:click={a} on:focus={b}>...</button>Szybkie sprawdzenie
Jaka składnia przypisuje funkcję obsługi kliknięcia?
Podsumowanie
Dyrektyw on:event można używać dla dowolnego zdarzenia DOM. Funkcja obsługi może być zapisana bezpośrednio lub wskazana jako nazwana funkcja i otrzymuje obiekt Event.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „on:click on:input on:submit” jest bezpłatna?
Tak — pełny tekst „on:click on:input on:submit” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „on:click on:input on:submit”?
Dołączaj listenery zdarzeń DOM bezpośrednio w składni szablonów Svelte. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „on:click on:input on:submit”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- on:click on:input on:submit
- Modyfikatory zdarzeń: preventDefault stopPropagation once
- Niestandardowe zdarzenia z createEventDispatcher
- Przekazywanie zdarzeń za pomocą on:click