イベントの動作を変更する修飾子

イベントにはそれらの動作を変更する修飾子を付けることが出来る。

下記の例では、on:clickイベントにonce修飾子を付けることで、toggleハンドラは１回だけ実行される。修飾子は|で連結することで複数の指定が可能。

<li><button on:click|once={toggle}>{messages[current]}</button></li>

修飾子として指定可能はものは下記表のとおり。once,preventDefault,passive以外はあまり使わないかも。

指定可能な修飾子

修飾子	動作
preventDefault	event.preventDefault()が実行されて既定の動作をキャンセルする。
stopPropagation	現在のイベントの伝播を抑止する。
passive	タッチ/ホイールイベントでスクロールのパフォーマンスを向上させる。
nonpassive	passive: false を設定する。
capture	バブリングフェーズではなくキャプチャフェーズ中にハンドラを起動する。
once	指定のハンドラは１度だけ実行可能とする。
self	設定した要素がevent.targetの場合にのみ、ハンドラを実行します。
trusted	ユーザーのアクションによってイベントが実行された場合のみ実行する。

app.svelte

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

<main>
        <EventModify />
</main>

<style>
</style>

EventModify.svelte

<script>
        const messages = ['ON', 'OFF'];
        let current = 0;
        const toggle = () => current = (current+1) % 2;

        let value = ""
        let errmsg = ""
        function onSubmit(event){
                errmsg = ""
                if (value.length < 10) {
                        errmsg = "10文字以上入力してください。"
                }
        }
</script>

<lavel>click:once</lavel>
<li><button on:click|once={toggle}>{messages[current]}</button></li>

<lavel>click:preventDefault</lavel>
<form action="" on:submit|preventDefault="{onSubmit}">
        <input type="text" bind:value={value}>
        <button type="submit">Submit</button> {errmsg}
</form>

<style>
        lavel {display:block; margin-top: 1em}
        li {list-style:none; margin-left:2em}
        button {margin-top: 1em}
</style>

---

適用イメージ