使用纯 JavaScript 从自定义事件处理程序收集数据

Question

我正在用纯 Javascript 创建一个自定义事件并将其附加到 DOM 元素。该元素对同一事件有多个事件侦听器。我写的代码是：

var element = document.getElementById('demo');

element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    e.data['otherKey'] = 'other value';
    return e.data;
});

// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  data: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

现在我想要的是，从最后一个事件处理程序获取数据，如下所示：

var modifiedData = element.dispatchEvent(event);

虽然我知道上面的行可能不正确，但我想要类似的东西。如果我使用 jQuery，有一个非常简单的事情，比如$.triggerHandler我可以使用它迭代特定事件的所有侦听器，并给出最后一个处理程序的返回值（如果有）。

但我想用纯 Javascript 来做。对于这样的事情有什么解决办法吗？

Answer 1

最简单的方法是将所有事件侦听器结果保存到某个对象。
就像const eventObj = {};
这样，每次活动结束后，您都可以在这里Object.assign(eventObj, <yourDataFromEvent>
了解 更多信息Object.assign()