Svelte遗留 API

on:

在符文模式下，事件处理程序与其他任何属性或 prop 一样。

在遗留模式下，我们使用 on: 指令：

App

<script>
	let count = 0;

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

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

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

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

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

处理程序可以内联声明，不会造成性能损失：

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

使用 | 字符为元素事件处理程序添加修饰符。

<form on:submit|preventDefault={handleSubmit}>
	<!-- submit 事件的默认行为被阻止，
	     所以页面不会重新加载 -->
</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>
	组件本身将发出点击事件
</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}>
	点击次数: {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}>
	点击次数: {count}
</button>

组件事件

组件可以在初始化时通过创建调度器来派发事件：

Stepper

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

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

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

<button on:click={() => dispatch('decrement')}>减少</button>
<button on:click={() => dispatch('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 已弃用：

Stepper

<script>
	export let decrement;
	export let increment;
</script>

<button on:click={decrement}>减少</button>
<button on:click={increment}>增加</button>

<script lang="ts">
	export let decrement;
	export let increment;
</script>

<button on:click={decrement}>减少</button>
<button on:click={increment}>增加</button>

在 GitHub 编辑此页面

$$props 和 $$restProps <slot>