eastpoint

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

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

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

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

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

指定可能な修飾子

修飾子

動作

preventDefault

event.preventDefault()が実行されて既定の動作をキャンセルする。

stopPropagation

現在のイベントの伝播を抑止する。

passive

タッチ/ホイールイベントでスクロールのパフォーマンスを向上させる。

nonpassive

passive: false を設定する。

capture

バブリングフェーズではなくキャプチャフェーズ中にハンドラを起動する。

once

指定のハンドラは1度だけ実行可能とする。

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>

適用イメージ