两个Key Up事件，我需要将这两个事件中的数据都放入两个变量中

Question

• I have two Key Up events, which log values of two different input elements.
• I want to combine both values from both events into one variable.
• I have the following snippet.

 var textInputSVK = document.getElementById("top__itextsvk"); var textInputKg = document.getElementById("top__itextkg"); function delay(e, delay) { let timer = 0; return function(...args) { clearTimeout(timer); timer = setTimeout(e.bind(this, ...args), delay || 0); }; } textInputKg.addEventListener( "keyup", delay(e => { var t = textInputKg.value; console.log(t); }, 500) ); textInputSVK.addEventListener( "keyup", delay(e => { var t = textInputSVK.value; console.log(t); }, 500) ); 

 <input id="top__itextkg" type="text" value="10" autocomplete="off" /> <input id="top__itextsvk" value="10" autocomplete="off" type="text" /> 

Answer 1

We can do it using Event Bubbling in which we will enclose the two input elements into a div and then identify the child element in which Key Up event is pressed.

 var parent = document.getElementById("parent"); function delay(e, delay) { let timer = 0; return function(...args) { clearTimeout(timer); timer = setTimeout(e.bind(this, ...args), delay || 0); }; } parent.addEventListener( "keyup", delay(e => { var t = e.target.value; console.log(`this event is from ${e.target.id}`,t); }, 500) ); 

 <div id="parent"> <input id="top__itextkg" type="text" value="10" autocomplete="off" /> <input id="top__itextsvk" value="10" autocomplete="off" type="text" /> </div> 

Answer 2

This is a classic case to use streams. We can use RxJS to solve this kind of problems very easily. Working demo