从纯 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

只需使用 detail 属性，它应该像您期望的那样工作：

var element = document.getElementById('demo');
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
    e.detail.otherKey = 'second value';
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    console.log(e.detail);
});
// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  detail: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

<div id="demo"></div>

根据评论，这里有一个想法，你可以实现你希望做的事情：

var element = document.getElementById('demo');
var originalFun = element.__proto__.addEventListener.bind(element);
var handlers = {};
var wrapperFun = function(e) {
  if (e.type in handlers) {
    var data = e.detail;
    handlers[e.type].forEach(function(fun){
      data = fun(data) || data;
    });
  }
};
element.__proto__.addEventListener = function(type, handler) {
  if (typeof handlers[type] === 'undefined') {
    handlers[type] = [];
    originalFun(type, wrapperFun);
  }
  handlers[type].push(handler);
};
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent first handler triggered");
    e.otherKey = 'second value';
    return e;
});
element.addEventListener("myCustomEvent", function(e) {
    console.log("myCustomEvent second handler triggered");
    console.log(e);
});
// Trigger the event
var event = new CustomEvent("myCustomEvent", {
  detail: {
    firstKey: 'first Value'
  }
});
element.dispatchEvent(event);

<div id="demo"></div>

Answer 2

最简单的方法是将所有事件侦听器结果保存到某个对象。
喜欢const eventObj = {};
因此，每次活动结束后，您都可以Object.assign(eventObj, <yourDataFromEvent>
更多关于Object.assign()