プレーン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()here

Answer 2

についてObject.assign(eventObj, <yourDataFromEvent>
単なる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>