Bạn cũng có thể khai báo hàm xử lý sự kiện cùng dòng:
App.svelte
<script>
let m = { x: 0, y: 0 };
function handleMove(event) {
m.x = event.clientX;
m.y = event.clientY;
}
</script>
<div
on:pointermove={(e) => {
m = { x: e.clientX, y: e.clientY };
}}
>
Con trỏ chuột đang ở {m.x} x {m.y}
</div>Trong một số framework thường hay có đề xuất nên tránh hàm xử lý cùng dòng để có hiệu năng tốt nhất, đặc biệt là trong các vòng lặp. Lời khuyên đó không áp dụng cho Svelte - bất kể bạn chọn cách nào, trình dịch sẽ luôn làm điều đúng đắn nhất.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
let m = { x: 0, y: 0 }; function handleMove(event) {m.x = event.clientX;
m.y = event.clientY;
}
</script>
<div on:pointermove={handleMove}> Con trỏ chuột đang ở {m.x} x {m.y}</div>
<style>
div {position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 1rem;
}
</style>