Svelte <svelte:window>

如同事件可以監(jiān)聽(tīng) DOM 標(biāo)簽一樣，你可以通過(guò)window 對(duì)象給 <svelte:window>標(biāo)簽添加事件監(jiān)聽(tīng)：

在代碼第33行，添加 keydown 監(jiān)聽(tīng)事件：

<svelte:window on:keydown={handleKeydown}/>

與DOM標(biāo)簽一樣，您可以添加 事件修飾符 ，例如 ?preventDefault?。

示例代碼

• App.svelte

<script>
	let key;
	let keyCode;

	function handleKeydown(event) {
		key = event.key;
		keyCode = event.keyCode;
	}
</script>

<style>
	div {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	kbd {
		background-color: #eee;
		border-radius: 4px;
		font-size: 6em;
		padding: 0.2em 0.5em;
		border-top: 5px solid rgba(255,255,255,0.5);
		border-left: 5px solid rgba(255,255,255,0.5);
		border-right: 5px solid rgba(0,0,0,0.2);
		border-bottom: 5px solid rgba(0,0,0,0.2);
		color: #555;
	}
</style>

<svelte:window on:keydown={handleKeydown}/>

<div style="text-align: center">
	{#if key}
		<kbd>{key === ' ' ? 'Space' : key}</kbd>
		<p>{keyCode}</p>
	{:else}
		<p>Focus this window and press any key</p>
	{/if}
</div>