Sveltesveltewindow

Svelte <svelte:window>

如同事件可以监听 DOM 标签一样，你可以通过window 对象给 <svelte:window>标签添加事件监听：在代码第33行，添加 keydown 监听事件：<svelte:window on:keydown={handleKeydown}/>与DOM标签一样，您可以添加 事件修饰符 ，例如 ​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>