javascript - 使用纯 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>