dispatchEvent(new Proxy(event, {}) 不起作用答案

【问题标题】：dispatchEvent(new Proxy(event, {}) does not workdispatchEvent(new Proxy(event, {}) 不起作用
【发布时间】：2019-02-12 03:53:29
【问题描述】：

我正在开发一个使用事件的应用程序。应用程序的模块在单独的容器中执行，我考虑使用代理来驯服被触发的事件。但是，我似乎无法让 dispatchEvent 接受已代理的事件。

以下失败：

let event = new CustomEvent('my event');
let eventProxy = new Proxy(event, {});
let eventTarget = document.createElement('div');

try {
    eventTarget.dispatchEvent(eventProxy); // VM134:4 Uncaught TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
} catch(error) {
    console.log(error.message);
}

有人知道如何让dispatchEvent 接受代理吗？

【问题讨论】：

“驯服被触发的事件”是什么意思？
根据捕获事件的容器来限制/过滤属性值。
new Proxy(event, {}) 不会创建完全透明的替换对象。不幸的是，你需要做更多的事情来处理它。

标签： javascript ecmascript-6 dom-events dispatchevent es6-proxy

【解决方案1】：

可能是一个老问题，但它可能对某人有所帮助，因为我没有找到类似的问答。

如 cmets 所述：

代理不会创建完全透明的替换对象。

你也可以注销eventProxy，看到大部分属性都是不可指责的。

我的建议是用一个对象包装你的Event，该对象有一个返回事件的函数。（对于多个事件，您甚至可以将该对象用作所有事件的网关）。

然后，通过调用该函数调度返回的事件。

现在，当您代理新对象时，您可以覆盖处理程序中的 get 以记录调用。

let event = new CustomEvent('my event');
let eventWrapper = { getEvent: ()=> event };
let handler = {
get: function(target, thisArg, argumentsList) {
    console.log('Logged!');
    return Reflect.get(...arguments)
  }
}
let eventProxy = new Proxy(eventWrapper, handler);
let eventTarget = document.createElement('div');

try {
    eventTarget.dispatchEvent(eventProxy.getEvent());
    console.log("Done!")
} catch(error) {
    console.log(error.message);
}

【讨论】：