アプリケーションイベントの伝達

イベントを起動するコンポーネントは、ソースコンポーネントと呼ばれます。フレームワークでは、異なるフェーズでイベントを処理できます。これらのフェーズにより、アプリケーションのイベントの最適な処理を柔軟に行うことができます。

次のフェーズがあります。

キャプチャ

イベントがキャプチャされ、アプリケーションルートからソースコンポーネントに伝達していきます。イベントはコンテインメント階層内のキャプチャイベントを受信するコンポーネントによって処理されます。

アプリケーションルートからイベントを起動したソースコンポーネントへと順番にイベントハンドラが呼び出されていきます。

このフェーズの任意の登録ハンドラでイベントの伝達を停止できます。停止した時点でこのフェーズまたはバブルフェーズのハンドラはそれ以上コールされなくなります。コンポーネントで event.stopPropagation() を使用してイベント伝達を停止すると、そのコンポーネントはデフォルトフェーズで使用されるルートノードになります。

このフェーズの登録ハンドラは、event.preventDefault() をコールしてイベントのデフォルトの動作をキャンセルできます。このコールにより、デフォルトフェーズのハンドラが実行されなくなります。

バブル

イベントを起動したコンポーネントはそのイベントを処理できます。その後イベントはソースコンポーネントからアプリケーションルートにバブルアップしていきます。イベントはコンテインメント階層内のバブルイベントを受信するコンポーネントによって処理されます。

イベントを起動したソースコンポーネントからアプリケーションルートへと順番にイベントハンドラが呼び出されていきます。

このフェーズの任意の登録ハンドラでイベントの伝達を停止できます。停止した時点でこのフェーズのハンドラはそれ以上コールされなくなります。コンポーネントで event.stopPropagation() を使用してイベント伝達を停止すると、そのコンポーネントはデフォルトフェーズで使用されるルートノードになります。

このフェーズの登録ハンドラは、event.preventDefault() をコールしてイベントのデフォルトの動作をキャンセルできます。このコールにより、デフォルトフェーズのハンドラが実行されなくなります。

デフォルト

イベントハンドラは、ルートノードからそのサブツリーを経由して非決定的な順序で呼び出されます。デフォルトフェーズのコンポーネント階層に関する伝達ルールは、キャプチャフェーズやバブルフェーズとは異なります。デフォルトフェーズは、アプリケーションの別のサブツリーにあるコンポーネントに影響するアプリケーションイベントを処理する場合に便利です。

前のフェーズでイベントの伝達が停止されていない場合、ルートノードはデフォルトのアプリケーションルートになります。前のフェーズでイベントの伝達が停止されている場合、ルートノードはハンドラで event.stopPropagation() を呼び出したコンポーネントになります。

次に、アプリケーションイベントの伝達シーケンスを示します。

1. イベントの起動 — アプリケーションイベントが起動します。イベントを起動するコンポーネントは、ソースコンポーネントと呼ばれます。
2. キャプチャフェーズ — フレームワークはアプリケーションルートからソースコンポーネントへのキャプチャフェーズをすべてのコンポーネントがトラバースされるまで実行します。任意のイベント処理で、イベントに対して stopPropagation() をコールして伝達を停止できます。
3. バブルフェーズ — フレームワークはソースコンポーネントからアプリケーションルートへのバブルフェーズをすべてのコンポーネントがトラバースされるまで、または stopPropagation() がコールされるまで実行します。
4. デフォルトフェーズ — フレームワークはルートノードからキャプチャフェーズまたはバブルフェーズで preventDefault() がコールされるまでデフォルトフェーズを実行します。前のフェーズでイベントの伝達が停止されていない場合、ルートノードはデフォルトのアプリケーションルートになります。前のフェーズでイベントの伝達が停止されている場合、ルートノードはハンドラで event.stopPropagation() を呼び出したコンポーネントになります。