从dart:html迁移至web包：如何实现事件监听？

final canvas = html.CanvasElement(width: 100, height: 100);

改为package:web的代码：
```dart
import "package:web/web.dart" as web;

...

final canvas = web.HTMLCanvasElement()..width=100..height=100;

但处理事件监听器时遇到了困难，比如下面这段用dart:html正常运行的代码：

html.document.onFocus.listen((_) {
  // handle event...
});

我注意到web.document有onfocus属性，但没法添加监听器，请问该如何处理这类事件？另外哪里能找到web包的详细文档？

事件监听的处理方案 #

package:web完全贴合原生JavaScript的事件绑定逻辑，和dart:html封装的Stream监听模式不一样，你需要使用addEventListener方法来绑定事件：

import "package:web/web.dart" as web;

void main() {
  // 绑定focus事件
  web.document.addEventListener('focus', (web.Event event) {
    // 处理事件逻辑
  });
}

如果后续需要移除监听器，要保留事件处理函数的引用，再调用removeEventListener：

// 定义独立的事件处理函数
void handleFocus(web.Event event) {
  // 处理事件逻辑
}

// 添加监听
web.document.addEventListener('focus', handleFocus);

// 移除监听（需要用到之前的函数引用）
web.document.removeEventListener('focus', handleFocus);

要是你更习惯dart:html的Stream风格，也可以自己封装一个工具方法，将Web API事件转换为Dart Stream：

import 'dart:async';
import 'package:web/web.dart' as web;

Stream<T> eventStream<T extends web.Event>(
  web.EventTarget target,
  String eventName,
) {
  late StreamController<T> controller;
  void listener(T event) => controller.add(event);

  controller = StreamController<T>(
    onListen: () => target.addEventListener(eventName, listener),
    onCancel: () => target.removeEventListener(eventName, listener),
  );
  return controller.stream;
}

// 使用示例
eventStream<web.Event>(web.document, 'focus').listen((_) {
  // 处理事件逻辑
});

web包的文档获取途径 #

• 查看package:web在pub.dev上的官方文档，里面包含完整的API说明和基础使用示例
• 由于package:web是原生Web API的直接映射，大部分用法可以参考MDN的Web API文档，两者的接口结构基本一致
• dart.dev的JS互操作相关文档中，也有关于package:web的使用指南和最佳实践

内容的提问来源于stack exchange，提问作者Richard Ambler