为什么我的发射只在一个方向上工作?
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
我正在通过 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