如何使用新的流API在Dart中注册自定义事件 [英] How do you register for custom events in Dart using the new streams API

问题描述

我尝试注册CustomEvent（ https：// developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent ）。旧代码是：

I'm trying to register for a CustomEvent (https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent) in Dart. The old code for this was:

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

新的流API已更改您注册活动的方式。如何使用新的API注册CustomEvents？

The new streams API has changed the way you register for events. How do you register for CustomEvents using the new API?

推荐答案

想法是自定义事件的声明和使用方式与内置事件。

The idea is that custom events are declared and used the same way as built-in events.

因此，对于自定义事件，您可以执行以下操作：

So for a custom event, you'd do something along the lines of:

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

然后在元素上收听：

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

一旦支持元素子类化并且事件通常直接在元素上触发，事件子类化为自定义事件允许更有用的事件类型。

This will get cleaner once element subclassing is supported and events are normally fired directly on their element, and when event subclassing allows more useful event types for custom events.

我们讨论了保持 window.on ['foo']。 ） API，但试图阻止字符串访问器，因为对于一些事件，我们将它们填充到不同的事件名称。

We discussed keeping a window.on['foo'].listen(...) API, but are trying to discourage the string accessors as for some events we polyfill them to different event names.

：

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);
}

这篇关于如何使用新的流API在Dart中注册自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！