理解 Dart 的元素事件答案

【问题标题】：Understanding Dart's element events理解 Dart 的元素事件
【发布时间】：2016-12-23 10:57:52
【问题描述】：

我开始学习 Dart 并发现一件事情非常令人困惑，即在元素上触发的事件。

假设我的模板中有项目，我想删除它们。

querySelector('.delete').onClick.listen((MouseEvent e) {
        item_id = /* how do I get this value? */
});

<button class="delete" data-item="1">Delete</button>
<button class="delete" data-item="2">Delete</button>
...
<button class="delete" data-item="n">Delete</button>

我如何访问上述元素？我如何获得它的属性？如何找出点击了哪个按钮，data-item 的值是多少？

我搜索了文档，但遗憾的是，我找不到任何可以引导我走向正确方向的内容。我遇到过获取 Node 对象的方法，但由于 Element 继承自 Node，我也无法真正访问它。

此外，非常感谢任何用于前端目的的学习 dart 的书籍或在线资源，因为我也没有找到任何东西

【问题讨论】：

标签： javascript dart mouseevent frontend

【解决方案1】：

如果你使用querySelectorAll()，你会得到一个ElementList，并且可以同时监听所有delete元素的点击事件。

querySelectorAll('.delete').onClick.listen((MouseEvent e) {
  print((e.target as HtmlElement).dataset['item']);
});

使用e.target，您可以获得对单击元素的引用。对于自动补全，我们将其转换为 HtmlElement，通过使用它的 dataset 属性，我们可以访问它的 data-... 属性。

DartPad example

控制台视图显示每个被点击元素的data-item 值。

【讨论】：

谢谢。这是一个非常有帮助的sn-p！
很高兴听到您觉得它有帮助。

【解决方案2】：

https://www.dartlang.org/guides/libraries/library-tour#darthtml---browser-based-apps

在处理事件部分中，声明：“事件可以在 DOM 树中上下传播。要发现最初触发事件的元素，请使用 e.target”

【讨论】：

谢谢！当我使用 dart2js 编译时，它给了我一个错误，但它仍然有效！很抱歉我之前没有找到那个页面，dartlang.org 上的 Dart 文档和介绍有点杂乱无章:(。我知道 Dart 是一种可选类型的语言，但是为什么下面的 import 'dart:html'; import 'dart:js'; void main() { querySelectorAll(".delete").onClick.listen((MouseEvent event) { print(event.target.getAttribute('data-item')); }); } 给 @ 987654323@?
同意，在 Dart 文档中导航并不总是那么容易，但最近提供了更好的结构。经过测试，你是对的。尝试了一点演员，现在元素可以访问了。 Element eItem = e.target; print('Element ' + eItem.id.toString());
确实如此。非常感谢！我认为这个话题已经结束了。
太棒了。一个小技巧，在调试器中检查对象，可以提供有关类型的信息，我经常使用它来掌握 dom 结构，它们非常复杂。于是有了演员的想法。