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 我可以使用它迭代特定事件的所有侦听器，并提供最后一个处理程序的返回值（如果有的话）。 / p>

但我想用纯Javascript来做。这种事情有什么解决方案吗？

Answer 1

最简单的方法是将所有事件侦听器结果保存到某个对象。
像Object.assign(eventObj, <yourDataFromEvent>一样因此，在每个活动结束后，您只需Object.assign()
有关{{1}} here

的更多信息

Answer 2

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

＆＃13;

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);

＆＃13;

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

＆＃13;

根据评论，您可以了解如何实现您希望做的事情：

＆＃13;

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);

＆＃13;

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

＆＃13;

在普通Javascript中从自定义事件处理程序收集数据

2 个答案: