Svelte舊版 API

on

在符文模式中，事件處理程序就像任何其他屬性或 prop。

在舊版模式中，我們使用 on: 指令

App

<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>

可以為同一個事件設定多個事件監聽器

App

<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。如果提供第二個參數，它會變成事件物件的 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，請改用回呼 props。這將使升級更容易，因為 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>