为什么我的发射只在一个方向上工作?

Why does my emit work in only one direction?

我正在通过 CDN 脚本标签使用 EventEmitter。我试图在 HTML 脚本标签中包含的外部脚本和本地脚本之间发出。从外部脚本发出效果很好。但是从 HTML 文档脚本标签发出的不会。

我错过了什么?

HTML 文件:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>
    <script src="emitter.js"></script>
  </head>
  <body></body>
  <script>
      e.on("fromJSFile", function(msg){
          console.log("Received message from external script: " + msg)
      })
      e.emit("fromHTMLScript", "Emitted from HTML script")
  </script>
</html>

外部脚本(emitter.js):

let e = new EventEmitter()

e.emit("fromJSFile", "Emitted from external script")
e.on("fromHTMLScript", function(msg){
    console.log("Recieved message from HTML script: " + msg)
})

它确实可以双向工作,但您需要等待监听器设置好后再发射。

浏览器一解析就会执行JavaScript,所以执行的是这个(按时间顺序):

let e = new EventEmitter()

e.emit("fromJSFile", "Emitted from external script") // An event will be emitted on "fromJSFile", but there are no listeners at the execution time
e.on("fromHTMLScript", function(msg){
  console.log("Recieved message from HTML script: " + msg)
}) // Adding a listener on "fromHTMLScript"


e.on("fromJSFile", function(msg){
  console.log("Received message from external script: " + msg)
}) // Adding a listener on "fromJSFile"
e.emit("fromHTMLScript", "Emitted from HTML script") // An event is emitted on "fromHTMLScript" and caught by the listener

您需要做的是尽快设置监听器(您甚至可以在页面完全加载之前设置它),然后 然后 随着页面完全加载已满载。

例如,你可以在你的JS文件中这样写:

let e = new EventEmitter()

e.on("fromHTMLScript", (msg) => {
  console.log("Recieved message from HTML script: " + msg)
}) // Register listener on "fromHTMLScript"

document.addEventListener("DOMContentLoaded", () => {
  e.emit("fromJSFile", "Emitted from external script")
}); // Emit on "fromJSFile" when the page fully loaded

这在你的脚本标签中:

e.on("fromJSFile", function(msg){
  console.log("Received message from external script: " + msg)
}) // Register listener on "fromJSFile"

document.addEventListener("DOMContentLoaded", () => {
  e.emit("fromHTMLScript", "Emitted from HTML script")
}); // Emit on "fromHTMLScript" when the page fully loaded