如何在多个输入字段上使用addEventListener在JavaScript中调用它们上的keyup事件？

Question

我有多个输入字段，希望在所有输入字段上应用onkeyup事件，并将textbox的ID作为参数传递。我需要多个keyup事件，因为我想根据输入ID处理一些计算。我尝试了，但失败了。请提出一些解决办法。

function GetDynamicTextBox(value) {
            return "<td>"
            +"<select class='js-example-placeholder-single js-states form-control loadcompany' id='lcompanyselect' onchange='getDriverAndTruck()';></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_co'></td>"
            +"<td><select class='js-example-placeholder-single js-states form-control' id='ldriverselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_driver'></td>"
            +"<td class=''><select class='js-example-placeholder-single js-states form-control' id='ltruckselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_truck'></td>"
            +"<td><input name='tripnumber' type='text' class='form-control' id='ltripnumber'/></td>"
            +"<td><select id='lsubtrip' name='subtrip' class='js-example-placeholder-single js-states form-control'>"
            +"<option disabled selected></option><option value='1'>1</option><option value='2'>2</option>"
            +"<option value='3'>3</option></select>"
            +"<td><input name='date' type='date' class='form-control' id='ldate'/></td>"
            +"<td><input name='pickupcity' type='text' class='form-control' id='lpickupcity'/></td>"
            +"<td><input name='pickupstate' type='text' class='form-control' id='lpickupstate'/></td>"
            +"<td><input name='deliverydate' type='date' class='form-control' id='ldeliverydate'/></td>"
            +"<td><input name='delivercity' type='text' class='form-control' id='ldelivercity'/></td>"
            +"<td><input name='deliverstate' type='text' class='form-control' id='ldeliverstate'/></td>"
            +"<td><input name='loadnumber' type='text' class='form-control' id='lloadnumber'/></td>"
            +"<td><input name='loadrate' type='text' class='form-control' id='lloadrate' onkeyup='countload();'/>"
            +"<span id='lerrormessage'></span></td>"
            +"<td><input name='dispatchfee' type='text' class='form-control' id='ldispatchfee' readonly/></td>"
            +'<td><input name="fuel" type="text" class="form-control count" id="lfuel" onkeyup=\"lcount('"+lfuel+"');\"/></td>'
            +"<td><input name='cardfee' type='text' class='form-control count' id='lcardfee' onkeyup='lcount('lcardfee');'/></td>"
            +"<td><input name='onloadrepair' type='text' class='form-control count' id='lonloadrepair' onkeyup='lcount('lonloadrepair');'/></td>"
            +"<td><input name='shoprepair' type='text' class='form-control count' id='lshoprepair' onkeyup='lcount('lshoprepair');'/></td>"
            +"<td><input name='trailerrent' type='text' class='form-control count' id='ltrailerrent' onkeyup='lcount('ltrailerrent');'/></td>"
            +"<td><input name='comcheck' type='text' class='form-control count' id='lcomcheck' onkeyup='lcount('lcomcheck');'/></td>"
            +"<td><input name='advance' type='text' class='form-control count' id='ladvance' onkeyup='lcount('ladvance');'/></td>"
            +"<td><input name='miscellenous' type='text' class='form-control count' id='lmiscellenous' onkeyup='lcount('lmiscellenous');'/></td>"
            +"<td><input name='misc1' type='text' class='form-control count' id='lmisc1' onkeyup='lcount('lmisc1');'/></td>"
            +"<td><input name='misc2' type='text' class='form-control count' id='lmisc2' onkeyup='lcount('lmisc2');'/></td>"
            +"<td><input name='misc3' type='text' class='form-control count' id='lmisc3' onkeyup='lcount('lmisc3');'/></td>"
            +"<td><input name='misc4' type='text' class='form-control count' id='lmisc4' onkeyup='lcount('lmisc4');'/></td>"
            +"<td><input name='total' type='text' class='form-control' id='ltotal' readonly/></td>"
            +"<td><input name='layover' type='text' class='form-control count' id='llayover' onkeyup='lcount('llayover');'/></td>"
            +"<td><input name='addtl1' type='text' class='form-control count' id='laddtl1' onkeyup='lcount('laddtl1')'/></td>"
            +"<td><input name='addtl2' type='text' class='form-control count' id='laddtl2' onkeyup='lcount('laddtl2');'/></td>"
            +"<td><input name='addtl3' type='text' class='form-control count' id='laddtl3' onkeyup='lcount('laddtl3');'/></td>"
            +"<td><input name='subtotal' type='text' class='form-control' id='lsubtotal' readonly/></td>"
            +"<td><input name='paymentmode' type='text' class='form-control' id='lpaymentmode'/></td>"
            +"<td><input name='pay' type='text' class='form-control' id='lpay' onkeyup='countleftpay();'/></td>"
            +"<td><input name='notes' type='text' class='form-control' id='lnotes'/></td>"
            +"<td><input name='grandtotal' type='text' class='form-control' id='lgrandtotal' readonly/></td>"
            +"<td><button type='button' class='btn btn-outline-info text-info' onclick='savetriplist();'>Submit</button>" 
        }

​

​

Answer 1

从上面的评论..。

1/2。最可能的情况是，OP需要作为单个事件侦听器(必须)分配/附加到GetDynamicTextBox的返回值被呈现到的元素节点上。因此，在示例代码中还提供了meta/外层html结构是很好的。2/2 ..。即将使用的技术称为https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation . https://davidwalsh.name/event-delegate . https://javascript.info/event-delegation . https://learn.jquery.com/events/event-delegation/

​

function createTextBoxMarkup(/* value */) {
  return `
    <td>
      <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/>
    </td>
    <td>
      <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/>
    </td>
    <td>
      <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/>
    </td>`;
}

function handleTextBoxKeyup(evt) {
  const elmInput = evt.target;
  const { type, name, id, value } = elmInput;

  console.log({ elmInput, type, name, id, value });  
}

function init() {
  const elmTBody = document.querySelector('tbody');
  const elmTr = document.createElement('tr');

  elmTr.innerHTML = createTextBoxMarkup();
  elmTBody.appendChild(elmTr);

  // register 'keyup' event type.
  elmTBody.addEventListener('keyup', handleTextBoxKeyup);
}
init();

body { margin: 0; }
.as-console-wrapper { min-height: 83%; }

<table>
  <tbody>
  </tbody>
</table>

​

从OP的进一步问题看编辑

我能用一下 函数GetDynamicTextBox(值){返回'‘} 然后定义这个计数如下： 函数计数(id ){ if (id == 'lfuel') { var a= document.getElementById('lfuel').value；} if (id == 'lcardfee') { var b= document.getElementById('lcardfee').value;} - Rakhi上述解决方案对我无效。-拉基

handleTextBoxKeyup的实现只是示例代码，它演示了如何从event对象中提取信息。当然，OP可以根据她/他的需要实现处理程序，例如，每当count是类型为"text"的输入元素时，就从处理程序内调用"text"函数。

​

function createTextBoxMarkup(/* value */) {
  return `
    <td>
      <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/>
    </td>
    <td>
      <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/>
    </td>
    <td>
      <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/>
    </td>`;
}

function isTextTypeInputElement(elmNode) {
  return (
    (elmNode?.tagName.toLowerCase() === 'input') &&
    (elmNode?.type === 'text')
  );  
}

function count(elmTextInput) {
  const {  name, id, value } = elmTextInput;

  console.log({ elmTextInput, name, id, value }); 
}

function handleTextBoxKeyup(evt) {
  const elmNode = evt.target;
  if (isTextTypeInputElement(elmNode)) {
  
    count(elmNode);
  }
}

function init() {
  const elmTBody = document.querySelector('tbody');
  const elmTr = document.createElement('tr');

  elmTr.innerHTML = createTextBoxMarkup();
  elmTBody.appendChild(elmTr);

  // register 'keyup' event type.
  elmTBody.addEventListener('keyup', handleTextBoxKeyup);
}
init();

body { margin: 0; }
.as-console-wrapper { min-height: 83%; }

<table>
  <tbody>
  </tbody>
</table>

​

Answer 2

“我有多个输入字段，我想在这些字段上应用onkeyup事件.”

我认为这个代码应该完成第一个需求。

const inputElements = document.querySelectorAll('input[type="text"]');

for (let el of inputElements) {
    el.addEventListener('keyup', keyupEventHandler);
}

function keyupEventHandler() {
  console.log(`The input element with id=${this.id} was just modified.`);
  
  if (this.id === '2') {
    alert('Input #2 alert!')
  }
}

注意关键字this如何包含触发keyup事件的整个元素。然后，您可以使用this.id访问该元素的ID，从而避免了前面提到的“将ID传递到事件处理程序”的需要。

关于你的帖子中的这一点：

“我希望能够根据ID进行计算.”

这个“计算”可以在keyupEventHandler函数中完成。我添加了if (this.id === '2')语句作为基于ID的计算示例。

小提琴演示：https://jsfiddle.net/knakamura13/pjzcs384/3/

编辑

针对主注释线程中的注释，下面的代码应该完全符合您的需要，使用您的count函数：

// Get an array of every input element on the page
// Note: use jQuery if installed: $(`input[type="text"]`)
const inputElements = document.querySelectorAll('input[type="text"]');

// Iterate over every input element
for (let el of inputElements) {
    // Add the `count` keyup event handler to every input element
    el.addEventListener('keyup', count);
}

// Event handler for keyup events
function count() {
  // Get ID of the element that was used to trigger the event
  const id = this.id;
  
  // Do something with that element's ID
  console.log(id);
}