アウレリア-イベント

この章では、Aureliaイベントについて学習します。

イベントデリゲート

委任でさえ、イベントハンドラーがDOM上の複数の要素ではなく、1つのトップレベル要素にアタッチされる便利な概念です。これにより、アプリケーションのメモリ効率が向上するため、可能な限り使用する必要があります。

これは、Aureliaフレームワークでイベント委任を使用する簡単な例です。私たちのビューにはボタンがありますclick.delegate イベント添付。

app.html

<template>
   <button click.delegate = "myFunction()">CLICK ME</button>
</template>

ボタンがクリックされると、 myFunction() と呼ばれます。

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

次の出力が得られます。

イベントトリガー

委任を使用できない場合があります。一部のJavaScriptイベントは委任をサポートしていません。IOSはいくつかの要素でそれをサポートしています。委任を許可するイベントを見つけるには、bubbleここでのイベントのプロパティ。このような場合は、trigger() 方法。

上記の例と同じ機能は、 click.trigger

app.html

<template>
   <button click.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}