SFDC：Lightning Web Componentsの開発 - Part 10

イベントの作成とディスパッチ

CustomEventとEventTarget.dispatchEventの使い方について。「イベントを作成するには、CustomEvent() コンストラクタを使用します。イベントをディスパッチするには、EventTarget.dispatchEvent() メソッドをコールします。」とのこと。

EventSimpleコンポーネントの中でpaginatorを呼び出しして「dispatchEvent」を使っている例を動かしてみました。

LWC開発で重要な仕様なので慣れる必要がありそうです。

イベントの処理

イベントの発生を待ってから応答する処理の書き方について。「this.template.addEventListener」という感じとのこと。詳細についてまた今度。

イベント伝達の設定

• Event.bubbles
  • イベントが DOM ツリーを上に伝達するかどうかを示す Boolean 値。デフォルト設定は false です。
• Event.composed
  • イベントがシャドウ境界を越えることができるかどうかを示す Boolean 値。デフォルト設定は false です。
• Event.target
  • イベントをディスパッチした要素。
• Event.currentTarget
  • イベントが DOM をトラバースするときに、このプロパティは常にイベントハンドラが接続されていた要素を参照します。
• Event.composedPath()
  • イベントが DOM をトラバースするときに、リスナーが呼び出されるイベント対象の配列。

DOM 全体での通信

「同じ DOM ツリー内に存在しないコンポーネント間で通信を行うには、2 つの方法があります。」とのこと。

• Lightning Message Service の使用
• pubsub モジュールの使用

イベントのベストプラクティス

ベストプラクティス、LWC開発に慣れたら意識する感じ。

まとめ

とりあえず動くもの作って慣れていくしかなさそう。