javascript - 带有响应的 CustomEvent，这可能吗？

Question

我正在尝试将 CustomEvent 合并到我的工作流程中。但我需要此事件以两种方式进行通信:脚本将事件发送到文档，并且它应该响应相同的发起者。

我试过以下方法:

ev = new CustomEvent('StorageRequest', {
  detail: {
    space: theSpace,
    method: theMethod,
    arguments: args
  }
})
document.dispatchEvent(ev)

我的听众看起来像这样:

document.addEventListener('StorageRequest', (e) => {
  console.debug('Sending StorageRequest', e)
  // do something, then answer back with response
})

实现这个的方法是什么？

我试过使用 Promise 并使用 resolve/reject 发送响应，但是传递函数似乎破坏了事件中的 detail，如果我尝试这样做，它会变成 null :

return new Promise((resolve, reject) => {
  ev = new CustomEvent('StorageRequest', {
    detail: {
      space: theSpace,
      method: theMethod,
      arguments: args,
      resolve, reject
    }
  })
  document.dispatchEvent(ev)
})

Notes: I'd like to avoid "generically" sending the response back to the document. I prefer the requests and responses to be fully intentional and handled within the code properly
I don't have an element attached to this, so using the element from e.target isn't an option (unless I can do something else with it)

Answer 1

您不能在 DOM 事件中“响应”- 它们只会向上传播 DOM 树，直到它到达顶层。

一个 promise 可能有效，设置正确，但你只能响应一次。一旦 promise 被解决/拒绝，您就不能再次解决或拒绝它，它将忽略后续的解决/拒绝调用。

作为替代方案，您可以设置 2 个单独的事件并响应第一个应该实现您正在尝试做的事情:

sReqEvent = new CustomEvent('StorageRequest', {
    detail: {
    space: theSpace,
    method: theMethod,
    arguments: args
});

console.debug('Sending StorageRequest');
document.dispatchEvent(sReqEvent);

听众:

document.addEventListener('StorageRequest', (e) => {
    // do something, then answer back with response
    var sRespEvent = new CustomEvent('StorageResponse', e.data);
    console.debug('Sending StorageResponse', e.data);
    document.dispatchEvent(sRespEvent);
});

document.addEventListener('StorageResponse', (e) => {
    // This is my response
});

当然这是不必要的，您可以只使用从 StorageRequest 监听器中调用的“StorageResponse”函数...

---

另一种选择是使用 window.postMessage，但是这更多地涉及到设置单独的来回请求，IE9 将只支持传递的字符串(你需要 JSON 编码/解码包在 IE9 中，如果你想发送除字符串以外的任何内容 - 可以，但如果你在所有浏览器中都这样做，作为一种全局解决方法，速度会更慢。