일반 자바 스크립트에서 사용자 지정 이벤트 처리기의 데이터 수집

Question

일반 자바 스크립트로 사용자 지정 이벤트를 만들고이를 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과 같은 매우 간단한 것이 있습니다. 특정 이벤트에 대한 모든 리스너를 반복하고 사용할 수있는 경우 마지막 핸들러의 반환 값을 제공합니다.

하지만 순수한 자바 스크립트로하고 싶습니다. 그런 종류의 것에 대한 해결책이 있습니까?

Answer 1

가장 쉬운 방법은 모든 이벤트 수신기 결과를 개체에 저장하는 것입니다. 예상대로 그래서 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>