DOM events

You can listen to any DOM event on an element (such as click or pointermove) with the on: directive:

<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>

<style>
    div {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
    }
</style>

You can also declare event handlers inline:

<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>

<style>
    div {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
    }
</style>

In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.

Event modifiers

DOM event handlers can have modifiers that alter their behaviour. For example, a handler with a once modifier will only run a single time:

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

You can chain modifiers together, e.g. on:click|once|capture={...}.

Event: isTrusted property

The isTrusted read-only property of the Event interface is a boolean value that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via EventTarget.dispatchEvent().

Component events

Components can also dispatch events. To do so, they must create an event dispatcher.

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>

Note that createEventDispatcher must be called when the component is first instantiated — you can't do it later inside.

Then, add an on:message handler in App.svelte:

App.svelte

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

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

<Inner on:message={handleMessage} />

Event forwarding 事件转发

Unlike DOM events, component events don't bubble. If you want to listen to an event on some deeply nested component, the intermediate components must forward the event.

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 />

App.svelte

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

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

<Outer on:message={handleMessage} />

DOM Event forwarding

Event forwarding works for DOM events too.

BigRedButton.svelte

<button on:click>
    Push
</button>

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} />