11

Dart でCustomEvent ( https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent )に登録しようとしています。このための古いコードは次のとおりです。

window.on['foo'].add((e) => print(e.detail));

新しいストリーム API により、イベントへの登録方法が変更されました。新しい API を使用して CustomEvents に登録するにはどうすればよいですか?

4

1 に答える 1

9

カスタムイベントは、組み込みイベントと同じ方法で宣言および使用されるという考え方です。

したがって、カスタムイベントの場合は、次のように実行します。

class DataGenerator {
   static EventStreamProvider<Event> dataEvent = new EventStreamProvider('data');
}

次に、要素でそれを聞くために：

DataGenerator.dataEvent.forTarget(element).listen(...);

これは、要素のサブクラス化がサポートされ、イベントが通常は要素に対して直接発生するようになると、イベントのサブクラス化によってカスタムイベントに対してより便利なイベントタイプが許可されると、よりクリーンになります。

APIを維持することについて説明しましたwindow.on['foo'].listen(...)が、文字列アクセサーを思いとどまらせようとしています。一部のイベントについては、それらを異なるイベント名にポリフィルします。

より完全な例を次に示します。

import "dart:html";

DivElement dartDiv;

main() {
  dartDiv = query("#dartDiv");

  // Add a button to generate a CustomEvent called CustomDartEvent.
  var customEventStreamProvider = new EventStreamProvider<CustomEvent>("CustomDartEvent");
  var customEventButton = new ButtonElement()
    ..text = "Generate custom Dart event"
    ..classes.add("gwt-Button")  // For consistency
    ..onClick.listen((e) {
      var detail = {
        "n": 8,
        "s": "Hello from Dart",
        "obj": {
          "hello": "from Dart"          
        }
      };  
      var event = new CustomEvent("CustomDartEvent",
          canBubble: false, cancelable: false, detail: detail);
      window.dispatchEvent(event);
    });
  dartDiv.children.add(customEventButton);

  // Listen for CustomEvents called CustomDartEvent.
  customEventStreamProvider.forTarget(window).listen((e) {
    printString("""
      Received CustomDartEvent:
      type: ${e.type},
      detail: ${e.detail}
    """);
  });
}

void printString(String s) {
  var div = new DivElement()
    ..text = s;
  dartDiv.children.add(div);
}
于 2013-02-11T21:10:08.167 に答える