web-dev-qa-db-ja.com

Aureliaデリゲートとトリガー：デリゲートまたはトリガーを使用するタイミングはどのようにわかりますか？

私は、Aureliaフレームワークを使用する方法を学習しようとしています。そうすることで、イベントをバインドする方法に関するドキュメント here を読みました。ドキュメントでは、デフォルトでデリゲートを使用することを推奨しています。私は彼らが彼らのブログ投稿の1つで提供したplunkrを分岐させて、それに少し加えました。完全なプランクは here です。

app.html

<template>
    <input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
    <input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />

    <button type="button" click.delegate="showAlert()">delegate()</button>
    <button type="button" click.trigger="showAlert()">trigger()</button>
</template>

app.js

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

Plunkrでわかるように、blur.trigger/click.delegate/click.triggerはすべてイベントを発生させますが、blur.delegateしません。

なぜそうなのですか？

.delegateは動作しません（もちろん手動でテストしません）？

javascriptaurelia
67
peinearydevelopment

delegateを使用できない場合を除き、delegateを使用します。

イベントの委任は、アプリケーションのパフォーマンスを向上させるために使用される手法です。ほとんどのDOMイベントの「バブリング」特性を活用して、イベントサブスクリプションの数を大幅に削減します。イベントの委任では、ハンドラーは個々の要素に添付されません。代わりに、body要素などの最上位ノードに単一のイベントハンドラーがアタッチされます。イベントがこの共有トップレベルハンドラーにバブルアップすると、イベント委任ロジックは、イベントの target に基づいて適切なハンドラーを呼び出します。

イベント委任 を特定のイベントで使用できるかどうかを確認するには、googlemdn [event name] event。実際、mdnでgoogle検索に関連するWebプラットフォームを先行させると、Mozilla Developer Networkから高品質の結果が返されることがよくあります。イベントのMDNページに移動したら、イベントbubblesかどうかを確認します。 Aureliaのdelegateバインディングコマンドでは、バブルするイベントのみを使用できます。 blur、focus、load、およびunloadイベントはバブルしないため、triggerを使用する必要があります。これらのイベントをサブスクライブするバインディングコマンド。

ぼかしのMDNページ です。 blurイベントとfocusイベントのイベント委任技術に関する詳細情報があります。

上記の一般的なガイダンスの例外：

次の条件が満たされている場合、ボタンでtriggerを使用します。

  1. ボタンを無効にする必要があります。
  2. ボタンのコンテンツは、テキストだけではなく、他の要素で構成されています。

これにより、無効化されたボタンの子をクリックしても、デリゲートイベントハンドラーにバブルアップしません。詳細 こちら 。

特定のiOSユースケースでtriggerにclickを使用します。

iOSは、a、button、input、およびselect以外の要素のクリックイベントをバブルしません。 clickなどの非入力要素でdivにサブスクライブしていて、iOSをターゲットにしている場合は、triggerバインディングコマンドを使用します。詳細 here および here 。

104
Jeremy Danyow

これに関して、Aureliaがキャプチャフェーズでイベントをリッスンする場合、ブラーデリゲートは機能しますが、Aureliaではこれを実行できません。誰かがアウレリアでのイベントをキャプチャする方法のヒントを提供できれば興味深いでしょう

その場合、以下が機能します。

<template>
    <input blur.delegate-capture='showAlert()' />
</template>
1
bigopon