Dartpad HTML环境下重新运行代码时如何移除事件监听器？

我懂你碰到的麻烦——在Dartpad的HTML环境里，每次重新运行代码时，之前绑定到document上的onSelectionChange监听器不会自动被移除，多次运行后同一个事件会触发多次回调，而且还没法直接获取Run按钮来手动取消旧订阅。

这里有个简单可行的方案：用一个全局集合来追踪所有创建的StreamSubscription实例，每次运行main函数时，先遍历这个集合取消所有旧的订阅，再添加新的监听器。这样就能保证每次重新运行时，旧的监听器都被彻底清理掉了。

具体实现代码如下：

import 'dart:html';

// 全局集合用来保存所有需要管理的订阅实例
final List<StreamSubscription> _activeSubscriptions = [];

void main() {
  // 第一步：清理所有上一次运行留下的旧订阅
  for (var subscription in _activeSubscriptions) {
    subscription.cancel();
  }
  _activeSubscriptions.clear();

  // 你的原有业务逻辑
  final header = querySelector('#header');
  header?.text = "Hello, World!";
  
  // 创建新订阅并加入全局集合管理
  var selectionSub = document.onSelectionChange.listen(handleSelectionChange);
  _activeSubscriptions.add(selectionSub);
}

void handleSelectionChange(Event e) {
  // 这里编写你的事件处理逻辑
  print('文本选中状态发生变化！');
}

这个方法的核心逻辑是利用Dartpad重新运行代码时全局变量不会被销毁的特性——我们用全局列表记录所有活跃的订阅，每次启动main就先清空旧的，再注册新的，从根源上避免了残留监听器的问题。如果之后需要监听更多其他事件，也可以把它们的订阅实例都加到这个全局列表里，统一进行清理管理。

内容的提问来源于stack exchange，提问作者sirKris van Dela