Svelte旧版 API

on

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

在旧版模式下，我们使用 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。如果提供了第二个参数，它将成为事件对象的 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，请改用回调 prop。这将使升级更容易，因为 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>