理解 Dart 的元素事件

Question

我已经开始学习 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 的书籍或在线资源，因为我也没有找到任何东西

Answer 1

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

在“处理事件”部分中，指出："Events can propagate up and down through the DOM tree. To discover which element originally fired the event, use e.target"

Answer 2

如果你使用 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 值。

理解 Dart 的元素事件

Understanding Dart's element events

javascript

frontend

mouseevent

dart