Skip to main content

Tương tự như việc bạn có thể thêm các trình nghe sự kiện cho bất kỳ phần tử DOM nào, bạn cũng có thể thêm các trình nghe sự kiện cho đối tượng window bằng cách sử dụng <svelte:window>.

Chúng ta đã có một hàm handleKeydown được khai báo — giờ đây tất cả những gì chúng ta cần làm là thêm một trình nghe sự kiện keydown:

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

Như với các phần tử DOM, bạn có thể thêm modifier cho sự kiện như preventDefault.

Tiếp theo: <svelte:window> bindings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
	let key;
	let keyCode;
 
	function handleKeydown(event) {
		key = event.key;
		keyCode = event.keyCode;
	}
</script>
 
<svelte:window />
 
<div style="text-align: center">
	{#if key}
		<kbd>{key === ' ' ? 'Space' : key}</kbd>
		<p>{keyCode}</p>
	{:else}
		<p>Focus vào của sổ này và ấn phím bất kỳ</p>
	{/if}
</div>
 
<style>
	div {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
 
	kbd {
		border-radius: 4px;
		font-size: 6em;
		padding: 0.2em 0.5em;
		background-color: #eeeeee;
		border-top: 5px solid #f9f9f9;
		border-left: 5px solid #f9f9f9;
		border-right: 5px solid #aaaaaa;
		border-bottom: 5px solid #aaaaaa;
		color: #555;
	}
</style>
initialising