javascript - 事件监听器没有触发？

Question

我正在尝试将从输入收集的数组元素推送到 HTML 表。由于某种原因，事件监听器未触发，这是 HTML。

        <form id="frm1">
      <input id='keyword-input' type="text" placeholder="Keywords"></input>
      <input id="color-input" type="text" placeholder="Color"></input>
      <input id="size-input" type="text" placeholder="Size"></input>
      <input id="profile-input" type="text" placeholder="Profile"></input>
      <input id="proxy-input" type="text" placeholder="Proxy"></input>
      <input id="category-input" type="text" placeholder="Category"></input>
      <input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
      <input id="schedule-input" type="time" placeholder="Schedule Task"></input>
      <input id="search-input" type="text" placeholder="Search Method"></input>
      <button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
    </form>

我尝试将监听器进一步移至脚本下方，并尝试将其嵌入到 onload 函数中，但都没有解决问题。

var submitButton = document.getElementById('addTask');


submitButton.addEventListener('submit', displayTable);


let taskModel = [{
    taskKeyword : value,
    taskSize : value,
    taskProfile : value
}];


function displayTable(taskModel) {
    var table = document.getElementById('taskTable');

    for (var i = 0; i < taskModel.length; ++i) {
      var tasks = tasks[i];

      var row = document.createElement('tr');

      var properties = ['taskKeyword', 'taskSize', 'taskProfile'];

      for (var j = 0; j < properties.length; ++j) {

        var cell = document.createElement('td');


        cell.innerHTML = taskModel[properties[j]];


        row.appendChild(cell);
      }

      table.appendChild(row);
    }
  }

我希望在按下“addTask”按钮后执行该函数，但它没有出现在开发工具事件监听器中。

Answer 1

您必须将监听器添加到您的表单而不是按钮。

来自official docs :

The submit event is fired when a form is submitted.

Note that submit is fired only on the form element, not the button or submit input.

Forms are submitted, not buttons.

<小时/>

对代码的重要更改:

• 第一:在 displayTable 处理函数中，将参数更改为其他名称，而不是 taskModel。

• 为什么？您尝试使用 taskModel 并假设它保存任务数据。然而，调用该函数时，taskModel 的实际值是event 数据。默认情况下，处理函数在执行时会传递事件对象(当您感兴趣的事件/操作发生时创建的)作为参数。

• 第二点:将 taskModel[properties[j]] 更改为 taskModel[0][properties[j]]

• 为什么？由于您将其声明为数组，因此在访问它时必须指定 taskModel 的索引。

var taskForm = document.getElementById('frm1');

taskForm.addEventListener('submit', displayTable);

function displayTable(event) {
  let taskModel = [{
    taskKeyword: document.getElementById('keyword-input').value,
    taskSize: document.getElementById('size-input').value,
    taskProfile: document.getElementById('profile-input').value
  }];
  var table = document.getElementById('taskTable');

  for (var i = 0; i < taskModel.length; ++i) {
    //var tasks = tasks[i];
    var row = document.createElement('tr');
    var properties = ['taskKeyword', 'taskSize', 'taskProfile'];
    for (var j = 0; j < properties.length; ++j) {
      var cell = document.createElement('td');
      cell.innerHTML = taskModel[0][properties[j]]; // You have to specify the index of the taskModel since you declared it as an array
      row.appendChild(cell);
    }
    table.appendChild(row);
  }

  // added event.preventDefault(); for demo purposes
  event.preventDefault();
}

<form id="frm1">
  <input id='keyword-input' type="text" placeholder="Keywords"></input>
  <input id="color-input" type="text" placeholder="Color"></input>
  <input id="size-input" type="text" placeholder="Size"></input>
  <input id="profile-input" type="text" placeholder="Profile"></input>
  <input id="proxy-input" type="text" placeholder="Proxy"></input>
  <input id="category-input" type="text" placeholder="Category"></input>
  <input id="tasks-input" type="number" placeholder="# Of Tasks"></input>
  <input id="schedule-input" type="time" placeholder="Schedule Task"></input>
  <input id="search-input" type="text" placeholder="Search Method"></input>
  <button type="submit" form="frm1" class="add-button" id='addTask'>Add Task</button>
</form>

<table id="taskTable">
</table>

注意:出于演示目的，我修改了此答案的 taskModel 实现。