浏览器中Javascript向Dart传递自定义事件失败，求排查代码问题

原代码展示 #

HTML代码 #

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
    <title>quickstart</title>
    <link rel="stylesheet" href="styles.css">
    <script defer src="allEvents.js"></script>
    <script defer src="main.dart.js"></script>
</head>

<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>

allEvents.js代码 #

function myFunction() {
  console.log("from event");
  var event = new CustomEvent("test", { "detail": "Example of an event" });
  window.document.dispatchEvent(event);
}

Dart main方法代码 #

import 'dart:html' as html;

void main() {
  print("from  main");
  html.window.onMessage.listen((html.MessageEvent event) {
    print("hello dart");
  });
}

问题原因 #

你的代码存在两处核心不匹配：

• 事件类型不匹配：JS中触发的是自定义test事件，但Dart监听的是onMessage（对应浏览器原生message事件，仅用于postMessage跨上下文通信），二者完全无关。
• 事件监听对象不匹配：JS在document对象上触发事件，但Dart监听的是window对象，自定义事件默认不冒泡，无法从document传递到window。

修复方案 #

修改Dart代码，改为在document对象上监听自定义test事件：

import 'dart:html' as html;

void main() {
  print("from  main");
  // 监听document上的test自定义事件
  html.document.addEventListener('test', (html.Event event) {
    // 转换为CustomEvent获取携带的detail内容
    if (event is html.CustomEvent) {
      print("hello dart, event detail: ${event.detail}");
    } else {
      print("hello dart");
    }
  });
}

或者使用事件流语法：

import 'dart:html' as html;

void main() {
  print("from  main");
  html.document.on['test'].listen((html.Event event) {
    if (event is html.CustomEvent) {
      print("hello dart, event detail: ${event.detail}");
    } else {
      print("hello dart");
    }
  });
}

修改后点击按钮，即可在控制台看到Dart输出的预期日志。

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