Соберите данные из пользовательского обработчика событий в простом 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

Самый простой способ - сохранить все результаты прослушивания Event для какого-либо объекта.
Как const eventObj = {};
Итак, после каждого события вы можете просто Object.assign(eventObj, <yourDataFromEvent>
Подробнее о Object.assign()here

Answer 2

Просто используйте 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>