Svelte AppsにおけるコンポーネントとDOMイベントの取り扱い

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
SvelteはフロントエンドのWebアプリを開発するための、最新のフロントエンドのフレームワークです.
それを使用するように簡単ですし、結果を高速作成することができます.
本稿では、svelteコンポーネントのDOMイベントをどのように扱うかを見ていきます.

イベント

私たちはon: イベントを処理するディレクティブ.例えば、マウスを画面の周りに動かすと、マウスの位置を得るために、次のように書くことができます.App.svelte ○

<script>
  let pos = { x: 0, y: 0 };

  const handleMousemove = event => {
    pos.x = event.clientX;
    pos.y = event.clientY;
  };
</script>

<style>
  div {
    width: 100vw;
    height: 100vh;
  }
</style>

<div on:mousemove={handleMousemove}>
  The mouse position is {pos.x} x {pos.y}
</div>

上のコードではon:mousemove={handleMousemove} 付けるhandleMousemove 我々の部門へのハンドラー
The handleMousemove 関数はevent パラメータMouseEvent オブジェクト.
したがって、マウスの位置にアクセスすることができますclientX and clientY マウスのX、Y位置のプロパティ.
最後に、画面に表示します.
イベントハンドラは以下のようにインラインで宣言できます:App.svelte ○

<script>
  let pos = { x: 0, y: 0 };
</script>

<style>
  div {
    width: 100vw;
    height: 100vh;
  }
</style>

<div on:mousemove={event => {
    pos.x = event.clientX;
    pos.y = event.clientY;
  }}>
  The mouse position is {pos.x} x {pos.y}
</div>

または、以下のように引用符の間に置くことができます.App.svelte ○

<script>
  let pos = { x: 0, y: 0 };
</script>

<style>
  div {
    width: 100vw;
    height: 100vh;
  }
</style>

<div on:mousemove="{event => {
    pos.x = event.clientX;
    pos.y = event.clientY;
  }}">
  The mouse position is {pos.x} x {pos.y}
</div>

引用符はいくつかの環境で構文強調表示を提供しますが、オプションです.
Svelteは、オンザフライで付着し、分離することによってそれを最適化するので、インラインイベントハンドラーは、アプリケーションのパフォーマンスに影響を与えません.

修飾子

DOM Eventディレクティブは、それらの振る舞いを変更するために修飾子を付けることができます.
例えば、我々はonce 修飾子on:click 要素のマウスクリックを一度だけ聞いてください.App.svelte ○

<script>
  const handleClick = () => {
    alert("alert");
  };
</script>

<button on:click|once={handleClick}>
  Click Me Once
</button>

The once 上のコードの修飾子はhandleClick ハンドラを一度、もう一度ボタンをクリックすると、何も実行されません.
その他の修飾子には

preventDefault  — 呼び出しevent.preventDefault ハンドラを実行する前に

stopPropagation  — 呼び出しevent.stopPropagation イベントが次の要素に到達するのを防ぐ

passive  — タッチまたはホイールイベントでスクロールパフォーマンスを向上させる

capture  — バブリング段階ではなく捕捉段階中にハンドラーを火災させる

self  — トリガハンドラのみevent.target 要素自体です.

彼らは、同様に連鎖することができますon:click|once|self ○○.
写真でMarvin Meyer をUnsplash

コンポーネントイベント

コンポーネントはイベントをディスパッチできます.たとえば、子から親へのイベントを送信するには、次のコードを記述できます.App.svelte ○

<script>
  import Button from "./Button.svelte";
  const handleGreet = event => {
    alert(event.detail.text);
  };
</script>

<Button on:greet={handleGreet} />

Button.svelte ○

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  const greet = () => {
    dispatch("greet", {
      text: "Hello Mary"
    });
  };
</script>

<button on:click={greet}>
  Send Greeting
</button>

インButton , 私たちはdispatch と定数createEventDispatcher 関数.dispatch イベントの名前とペイロードをイベントエミッションで引数として送信する関数です.
でApp うーん、我々はgreet イベントButton によってhandleGreet イベントリスナーon:greet ディレクティブ.
時handleGreet 後に走るgreet イベントは、event オブジェクトはイベントエミッションで送信されたデータを持ち、event.detail.text ○○.
したがって、我々が送信挨拶ボタンをクリックするとき、我々は「ハローマルイ」が警報ボックスに表示されるのを見ます.

イベント転送

コンポーネントイベントはDOMイベントのように泡を吹かない.他のコンポーネントに転送するには、forward 関数呼び出しdispatch ○○.
イベントを進めるコンポーネントのイベントを聞くことができます.
例えば、以下のように書くことができます.Button.svelte ○

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  const greet = () => {
    dispatch("greet", {
      text: "Hello Mary"
    });
  };
</script>

<button on:click={greet}>
  Send Greeting
</button>

Parent.svelte ○

<script>
  import Button from "./Button.svelte";
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  const forward = () => {
    dispatch("greet", event.detail);
  };
</script>

<Button on:greet />

App.svelte ○

<script>
  import Parent from "./Parent.svelte";
  const handleGreet = event => {
    alert(event.detail.text);
  };
</script>

<Parent on:greet={handleGreet} />

上のコードでButton.svelte は、greet イベント、そしてParent.svelte コンポーネントはイベントを転送しますApp.svelte 聞くgreet イベント.
インParent.svelte (株)

<Button on:greet />

と同じです.

<Button on:greet={forward} />

イベントフォワーディング

DOMイベントをコンポーネントイベントのように進めることができます.例えば、以下のように書くことができます.Button.svelte ○

<button on:click>
  Send Greeting
</button>

Parent.svelte ○

<script>
  import Button from "./Button.svelte";
</script>

<Button on:click />

App.svelte ○

<script>
  import Parent from "./Parent.svelte";
  const handleClick = event => {
    alert("Hello");
  };
</script>

<Parent on:click={handleClick} />

上のコードをクリックしますButton to Parent and Parent to App ○○.
したがって、我々は'ハロー'アラート画面を表示するときに我々は、送信ボタンを送信をクリック表示されます.

結論

SvelteコンポーネントとDOM要素にはイベントハンドラを接続できます.
我々は、イベントを使用してon: 修飾子を持つディレクティブ.
イベントは、on: 任意の値を設定せずにディレクティブ.