dart SDK 中是否有事件委托？答案

【问题标题】：Is there an event delegation in dart SDK?dart SDK 中是否有事件委托？
【发布时间】：2013-04-23 11:41:08
【问题描述】：

想象一下，您想监听对页面上任何锚元素的所有点击。页面上的锚点可以在页面生命周期内动态添加/删除，您希望注册所有点击事件，即使是新添加的。

有什么方法可以使用 Dart 的标准库在 Dart 中附加委托事件（如在 jQuery 中）？

在 jQuery 中，您可以使用 element.on('click', '.selector', handler); 实现此目的。

【问题讨论】：

遗憾的是，我还在我们的应用程序中创建了一个辅助方法，但真正的解决方案是在 dart:html 或像你一样的 Pub 包中使用它。

标签： dart

【解决方案1】：

您现在可以像这样使用ElementStream.matches 做到这一点：

document.body.onClick.matches('.selector').listen((Event event) {
  print('Super cool!');

  // The currently registered target for the event
  // document.body
  event.currentTarget;

  // The element whose CSS selector matched
  // .selector
  event.matchingTarget;

  // The target to which the event was originally dispatched
  // the real element clicked under .selector
  event.target;
});

【讨论】：

这很有趣。它究竟是如何工作的？ event.target 中会有什么内容？想象一下，在div class='selector' 内部，有一些<a>Click me!</a> 元素。现在我们可以对三个不同的元素感兴趣：i) body 我们正在监听的元素（很容易获得），ii) .selector 我们正在匹配的元素，iii) <a> 元素，确实收到了点击。其中哪些将在event.target 中？是否有可能以某种方式获得其他人？
我只是做了一个快速测试：e.currentTarget 指向document.body，e.target 指向<a>Click me!</a>。我认为您无法检索匹配 .selector 的元素，因为可能有多个 .matches 方法链接在一起。 jQuery 是如何处理这个问题的？
在jQuery中，传递给委托事件处理程序的event对象具有三个属性：event.target-<a>Click me!</a>、event.currentTarget-.selector和event.delegatedTarget-document.body，你可以查看jsfiddle.net/d2fvW 的例子
现在有一个Event.matchingTarget。

【解决方案2】：

因为我没有找到可行的解决方案，所以我创建了启用委派的包。

您可以在以下位置找到它 http://pub.dartlang.org/packages/delegate

代码很简单：

delegate(parent, condition, handler) {
  return (event) {
    var element = event.target;
    while (element != parent && element != null) {
      if (condition(element)) {
        handler(event, element);
      }
      element = element.parent;
    }
  };
}

delegateOn(parent, String eventType, condition, handler) {
  parent.on[eventType].listen(delegate(parent, condition, handler));
}

【讨论】：