如何在多个输入字段上使用 addEventListener 在 JavaScript 中对其调用 keyup 事件？ [复制]

Question

我有多个输入字段，我想在所有输入字段上应用 onkeyup 事件，并将文本框的 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

从上面的cmets ...

1/2 ... 很可能 OP 需要作为单个事件侦听器，它将（必须）分配/附加到 GetDynamicTextBox 的返回值获取/被呈现的元素节点进入。因此，很高兴为示例代码提供了元/外部 html 结构。

2/2 ... 要使用的技术称为Event delegation ... David Walsh :: How JavaScript Event Delegation Works ... javascript.info :: Event Delegation ... jQuery :: Understanding 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 的进一步问题

我可以使用类似的东西

function GetDynamicTextBox(value) {
  return '<td><input type="text" id="lfuel" onkeyup="count('lfuel');"/></td><td><input type="text" id="lcardfee" onkeyup="count('lcardfee');" /></td>'
}

然后像这样定义计数：

function count(id) {
  if (id == 'lfuel') {
    var a = document.getElementById('lfuel').value;
  }
  if (id == 'lcardfee') {
    var b = document.getElementById('lcardfee').value;}
}

– 拉基

上述解决方案对我不起作用。 – 拉基

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

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);
}