Bạn có thể lắng nghe các sự kiện của DOM trên svelte như sau

<script>
	let m = { x: 0, y: 0 };

	function handleMove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<div on:pointermove={handleMove}>
	The pointer is at {m.x} x {m.y}
</div>

Hoặc:

<script>
	let m = { x: 0, y: 0 };
</script>

<div
	on:pointermove={(e) => {
		m = { x: e.clientX, y: e.clientY };
	}}
>
	The pointer is at {m.x} x {m.y}
</div>

Modifiers

Trong Svelte, bạn có thể sử dụng các modifiers để xử lý sự kiện. Các modifiers này thường được sử dụng để thay đổi hoặc điều chỉnh cách sự kiện được xử lý hoặc ảnh hưởng đến các phần tử DOM mà sự kiện được áp dụng.

• .prevent: Ngăn chặn hành vi mặc định của sự kiện. Ví dụ, ngăn chặn sự kiện submit của một form.
• .stop: Ngăn chặn sự kiện lan truyền lên các phần tử cha. Ví dụ, ngăn chặn sự kiện click từ việc lan truyền đến các phần tử cha.
• .self: Chỉ kích hoạt xử lý sự kiện khi sự kiện được kích hoạt trên chính phần tử đó, không phải từ các phần tử con.
• .once: Xử lý sự kiện chỉ một lần. Sau khi xử lý lần đầu tiên, không có sự kiện nào khác được kích hoạt nữa.
• .passive: Đánh dấu sự kiện là “passive”, giúp tăng tốc độ cuộc gọi hàm xử lý và tránh việc chặn cảm ứng (touch) trên các thiết bị cảm ứng.
• .capture: xử lý sự kiện ở chế độ “capture” thay vì chế độ “bubbling” (lan truyền từ phần tử con lên phần tử cha). Khi một sự kiện diễn ra trên một phần tử trong DOM, nó thường lan truyền từ phần tử con lên phần tử cha theo mô hình bubbling (lan truyền từ trong ra ngoài). Tuy nhiên, đôi khi bạn muốn xử lý sự kiện ở mức độ “capture” (từ ngoài vào trong), tức là xử lý sự kiện khi nó bắt đầu từ phần tử cha và lan truyền xuống các phần tử con.

Ví dụ:

<button on:click|once={() => alert('clicked')}>
	Click me
</button>

Component events

Trong Svelte, các component có thể gửi và lắng nghe các sự kiện thông qua các sự kiện tùy chỉnh để tương tác với bên ngoài component. Điều này cho phép các component giao tiếp với nhau hoặc với phần tử cha của chúng thông qua cơ chế sự kiện.

Để gửi một sự kiện từ một component, bạn có thể sử dụng phương thức dispatch để tạo và phát ra một sự kiện tùy chỉnh:

Inner.svelte

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

Ở đây, khi người dùng nhấn vào nút, sự kiện message được phát ra cùng với dữ liệu tùy chỉnh.

Để lắng nghe sự kiện từ một component khác hoặc từ phần tử cha, bạn có thể sử dụng on:message:

App.svelte

<script>
	import Inner from './Inner.svelte';
	let value;
	function handleMessage(event) {
		value = event.detail.text;
	}
</script>

<Inner on:message={handleMessage} />

<p>{value || ''}</p>

Event forwarding

Sự kiện forwarding trong Svelte là quá trình truyền sự kiện từ một phần tử con lên một phần tử cha hoặc một component cha. Điều này cho phép bạn gửi sự kiện từ một phần tử con lên cấp cao hơn trong cây DOM hoặc từ một component con tới một component cha.

Để forward một sự kiện từ một phần tử con lên phần tử cha, các bạn thực hiện như sau:

Inner.svelte

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function sayHello() {
		dispatch('message', {
			text: 'Hello!'
		});
	}
</script>

<button on:click={sayHello}>
	Click to say hello
</button>

Outer.svelte

<script>
	import Inner from './Inner.svelte';
</script>

<Inner on:message />

Trong file Outer.svelte chúng ta chèn sự kiện on:message, nó sẽ cho phép chúng ta forward sự kiện từ Inner.svelte lên App.svelte.

App.svelte

<script>
	import Outer from './Outer.svelte';

	function handleMessage(event) {
		alert(event.detail.text);
	}
</script>

<Outer on:message={handleMessage} />

DOM event forwarding

Chúng ta cũng có thể forward các sự kiện của DOM bằng cách chèn sự kiện như on:click giống như ví dụ sau đây:

BigRedButton.svelte

<button on:click>
	Push
</button>

<style>
	button {
		font-size: 1.4em;
		width: 6em;
		height: 6em;
		border-radius: 50%;
		background: radial-gradient(circle at 25% 25%, hsl(0, 100%, 50%) 0, hsl(0, 100%, 40%) 100%);
		box-shadow: 0 8px 0 hsl(0, 100%, 30%), 2px 12px 10px rgba(0,0,0,.35);
		color: hsl(0, 100%, 30%);
		text-shadow: -1px -1px 2px rgba(0,0,0,0.3), 1px 1px 2px rgba(255,255,255,0.4);
		text-transform: uppercase;
		letter-spacing: 0.05em;
		transform: translate(0, -8px);
		transition: all 0.2s;
	}

	button:active {
		transform: translate(0, -2px);
		box-shadow: 0 2px 0 hsl(0, 100%, 30%), 2px 6px 10px rgba(0,0,0,.35);
	}
</style>

App.svelte

<script>
	import BigRedButton from './BigRedButton.svelte';
	import horn from './horn.mp3';

	const audio = new Audio();
	audio.src = horn;

	function handleClick() {
		audio.play();
	}
</script>

<BigRedButton on:click={handleClick} />