0Pricing
Sveltejs Academy · レッスン

on:click、on:input、on:submit

Svelteのテンプレート構文で、DOMイベントリスナーを直接追加します。

「on:click、on:input、on:submit」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

イベントディレクティブ

on: の後に DOM イベント名を続けて、リスナーを追加します。

<button on:click={handleClick}>Click</button>

インラインハンドラー

インラインの処理には、アロー関数を渡します。

<button on:click={() => count++}>+</button>

名前付きハンドラー

スクリプトで関数を定義し、その名前を参照します。

<script>
  function save() { /* ... */ }
</script>

<button on:click={save}>Save</button>

イベントオブジェクトを受け取る

ハンドラーは引数としてネイティブの Event を受け取ります。

function onChange(e) { value = e.target.value; }

on:input

テキストフィールドでユーザーが入力するたびに、input イベントが発生します。

<input on:input={(e) => text = e.target.value} />

on:submit

送信を処理するには <form> に追加します。デフォルトの動作を防ぐにはモディファイアを使用してください。

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

on:keydown

入力要素またはドキュメント全体で、キーボードイベントを監視します。

<input on:keydown={(e) => e.key === "Enter" && submit()} />

on:change と on:input の違い

ユーザーが編集を終えると change イベントが発生します。一方、input はキー入力ごとに発生します。

マウスイベント

標準的な DOM のマウスイベントはすべて使用できます。mouseenter、mouseleave、mousemove などです。

タッチイベント

touchstart などのモバイル向けタッチイベントも、同じ方法でサポートされています。

<div on:touchstart={start} on:touchend={end}>

複数のリスナー

同じ要素に複数の on: ディレクティブを指定して、異なるイベントを処理できます。

<button on:click={a} on:focus={b}>...</button>

クイックチェック

クリックハンドラーを指定する構文はどれですか。

まとめ

任意の DOM イベントには on:event ディレクティブを使用します。ハンドラーにはインライン処理または名前付き関数を指定でき、Event を受け取ります。

よくある質問

「on:click、on:input、on:submit」レッスンは無料ですか？

はい。「on:click、on:input、on:submit」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「on:click、on:input、on:submit」で何を学びますか？

Svelteのテンプレート構文で、DOMイベントリスナーを直接追加します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「on:click、on:input、on:submit」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. on:click、on:input、on:submit
  2. イベント修飾子：preventDefault、stopPropagation、once
  3. createEventDispatcherによるカスタムイベント
  4. on:clickによるイベントの転送
← Sveltejs Academyに戻る