イベントの動作を変更する修飾子¶
イベントにはそれらの動作を変更する修飾子を付けることが出来る。
下記の例では、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>
適用イメージ