DOM Events

event element dengan menggunakan on:

kode dibawah ini akan melakukan event DOM saat mouse digerakan di dalam kotak merah.

<!-- @filename: DOM Events -->
<script lang="ts">
	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>

<style>
	div {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: red;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

Event Modifiers

1. preventDefault
   preventDefault untuk mencegah perilaku default dari browser, seperti mencegah formulir dikirim, dan mencegah browser untuk melakukan drag & drop

   <!-- @filename: Event Modifier - preventDefault -->
   <script>
   	function onClick(event) {}
   </script>
   
   <button on:click|preventDefault={onClick} />
   

2. stopPropagation
   stopPropagation membantu kita untuk berhenti menjangkau event ke elemen berikutnya. jika stopPropagation dihapus, ketika klik inner div maka outer div juga ikut terender

   <!-- @filename: Event Modifier - stopPropagation -->
   <button on:click={() => console.log('Outer div')}>
   	<h1>Outer div</h1>
   	<button on:click|stopPropagation={() => console.log('inner div')}>
   		<h1>Inner div</h1>
   	</button>
   </button>
   

3. once
   once membantu kita untuk memicu event hanya satu kali.

   <!-- @filename: Event Modifier - once -->
   <script>
   	function handleClick() {
   		alert('You can see me once');
   	}
   </script>
   
   <button on:click|once={handlerClick}>Click me</button>
   

Component Event

mengirim event dari komponen child ke parent.

<!-- @filename: Component.svelte - child -->
<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

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

<button on:click={sayHello}> Test </button>

<!-- @filename: App.svelte - parent -->
<script>
	import ComponentEvent from './lib/ComponentEvent.svelte';

	function getDataFromParent(e) {
		console.log(e);
		alert(e.detail.text);
	}
</script>

<ComponentEvent on:message={getDataFromParent} />