Events

The pointer is at 0 x 0

This div uses the on:pointermove event handler to show your current pointer location within the div.

xml

<div
	class="left-0 top-0 w-full h-96 p-4 bg-secondary-300"
	on:pointermove={(e) => {
		m = { x: Math.floor(e.clientX), y: Math.floor(e.clientY) };
	}}
>
	<p class="text-surface-900 font-bold">The pointer is at {m.x} x {m.y}</p>
</div>

This button demonstrates a simple on:click event handler.

xml

<button class="btn variant-filled-secondary mx-4 mt-4" on:click={() => alert('clicked')}>
	Click Me
</button>

This button demonstrates event forwarding from an Inner component to an Outer component to this page.

xml

<Outer on:message={handleMessage} />

The Outer.svelte script block looks like this:

typescript

import Inner from './Inner.svelte';
import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

// can say on:message={forward} and perform this function or on:message without a value does the same
/* function forward(event: any) {
        dispatch('message', event.detail)
} */

The Inner.svelte script block looks like this:

typescript

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sayHello() {
	dispatch('message', {
		text: 'You must have clicked the message button. Good job!'
	});
}

The Inner.svelte page also has the button that gets clicked and starts the chain of event forwarding:

xml

<button class="btn variant-filled-secondary mx-4 mt-4" on:click={sayHello}>
	Click for Message
</button>

This button forwards an on:click event from another component.

xml

<BigRedButton on:click={handleClick} />

The BigRedButton.svelte page looks like this:

xml

<button class="btn variant-filled-tertiary mx-4 mt-4" on:click> Forward Click </button>