SvelteレガシーAPI

on

Rune モードでは、イベントハンドラは他の属性やプロパティと同様に扱われます。

レガシーモードでは、on: ディレクティブを使用します。

アプリ

<script>
	let count = 0;

	/** @param {MouseEvent} event */
	function handleClick(event) {
		count += 1;
	}
</script>

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

<script lang="ts">
	let count = 0;

	function handleClick(event: MouseEvent) {
		count += 1;
	}
</script>

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

ハンドラは、パフォーマンスへの影響なしにインラインで宣言できます。

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

要素のイベントハンドラに`|`文字を使用して修飾子を追加します。

<form on:submit|preventDefault={handleSubmit}>
	<!-- the `submit` event's default is prevented,
	     so the page won't reload -->
</form>

使用可能な修飾子は次のとおりです。

preventDefault — ハンドラを実行する前にevent.preventDefault()を呼び出します。
stopPropagation — event.stopPropagation()を呼び出し、イベントが次の要素に到達するのを防ぎます。
stopImmediatePropagation - event.stopImmediatePropagation()を呼び出し、同じイベントの他のリスナーの発火を防ぎます。
passive — タッチ/ホイールイベントでのスクロールパフォーマンスを向上させます（Svelteは安全な場所で自動的に追加します）。
nonpassive — 明示的にpassive: falseを設定します。
capture — バブリングフェーズではなく、キャプチャフェーズ中にハンドラを発火します。
once — 最初に実行された後、ハンドラを削除します。
self — event.targetが要素自体の場合のみ、ハンドラを発火します。
trusted — event.isTrustedがtrueの場合のみ、ハンドラを発火します。つまり、ユーザーアクションによってイベントがトリガーされた場合です。

修飾子は連結できます。例：on:click|once|capture={...}。

on:ディレクティブを値なしで使用すると、コンポーネントはイベントを転送します。つまり、コンポーネントのコンシューマーはそれをリスンできます。

<button on:click>
	The component itself will emit the click event
</button>

同じイベントに対して複数のイベントリスナーを持つことができます。

アプリ

<script>
	let count = 0;

	function increment() {
		count += 1;
	}

	/** @param {MouseEvent} event */
	function log(event) {
		console.log(event);
	}
</script>

<button on:click={increment} on:click={log}>
	clicks: {count}
</button>

<script lang="ts">
	let count = 0;

	function increment() {
		count += 1;
	}

	function log(event: MouseEvent) {
		console.log(event);
	}
</script>

<button on:click={increment} on:click={log}>
	clicks: {count}
</button>

コンポーネントイベント

コンポーネントは、初期化時にディスパッチャーを作成することでイベントをディスパッチできます。

ステッパー

<script>
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('decrement')}>decrement</button>
<button on:click={() => dispatch('increment')}>increment</button>

dispatchはCustomEventを作成します。第2引数を指定すると、イベントオブジェクトのdetailプロパティになります。

このコンポーネントのコンシューマーは、ディスパッチされたイベントをリスンできます。

<script>
	import Stepper from './Stepper.svelte';

	let n = 0;
</script>

<Stepper
	on:decrement={() => n -= 1}
	on:increment={() => n += 1}
/>

<p>n: {n}</p>

コンポーネントイベントはバブルしません。親コンポーネントは、その直下の子コンポーネントのイベントのみをリスンできます。

onceを除き、修飾子はコンポーネントイベントハンドラでは無効です。

Svelte 5への移行を計画している場合は、代わりにコールバックプロパティを使用してください。これにより、createEventDispatcherは非推奨となるため、アップグレードが容易になります。
ステッパー
<script>
	export let decrement;
	export let increment;
</script>

<button on:click={decrement}>decrement</button>
<button on:click={increment}>increment</button>

GitHubでこのページを編集する

前へ次へ

$$props と $$restProps <slot>