Svelteでのイベントの操作

Svelteでイベントを操作する方法を学ぶ

DOMイベントをリッスンする

Svelteでは、を使用して、テンプレートで直接DOMイベントのリスナーを定義できます。on:<event>構文。

たとえば、clickイベントでは、関数をに渡しますon:click属性。

聞くにはonmousemoveイベントでは、関数をに渡しますon:mousemove属性。

インラインで定義された処理関数の例を次に示します。

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

で定義された処理関数を使用した別の例を次に示します。scriptコンポーネントのセクション:

<script>
const doSomething = () => {
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

コードが冗長すぎない場合は、インラインを使用します。たとえば、2〜3行しかない場合は、スクリプトセクションで上に移動します。

Svelteは、イベントハンドラーを関数の引数として渡します。これは、伝播を停止したり、で何かを参照したりする必要がある場合に便利です。イベントオブジェクト

<script>
const doSomething = event => {
  console.log(event)
  alert('clicked')
}
</script>

<button on:click={doSomething}>Click me</button>

ここで、「伝播の停止」について説明しました。これは非常に一般的なことです。たとえば、フォーム送信イベントを停止します。 Svelteは私たちに提供します修飾子、手動で行うことなく直接適用する方法。stopPropagationそしてpreventDefault最もよく使用する2つの修飾子だと思います。

次のような修飾子を適用します。<button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

よりニッチな他の修飾子があります。capture有効にするバブリングの代わりにイベントをキャプチャするonceイベントを1回だけ発生させ、selfイベントのターゲットがこのオブジェクトである場合にのみイベントを発生させます(バブリング/キャプチャ階層からイベントを削除します)。

コンポーネントでイベントを作成する

興味深いのは、コンポーネントでカスタムイベントを作成し、組み込みのDOMイベントと同じ構文を使用できることです。

そのためには、インポートする必要がありますcreateEventDispatcherからの機能svelteパッケージ化して呼び出し、イベントディスパッチャを取得します。

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
</script>

そうしたら、dispatch()関数、イベントを識別する文字列を渡します(これを使用しますon:これを使用する他のコンポーネントの構文):

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()

//when it’s time to trigger the event dispatch(‘eventName’) </script>

これで、他のコンポーネントが使用できるようになりました

<ComponentName on:eventName={event => {
  //do something
}} />

オブジェクトをイベントに渡し、2番目のパラメータをに渡すこともできますdispatch()

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  const value = 'something'

//when it’s time to trigger the event dispatch(‘eventName’, value)

//or dispatch(‘eventName’, { someProperty: value }) </script>

渡されたオブジェクトdispatch()で利用可能ですeventオブジェクトとしてevent.detail

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル: