javascript - 事件监听器未触发？

我试图将从输入中收集的数组元素推送到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”按钮就可以执行该功能，但是它不会出现在开发工具事件监听器中。

最佳答案

您必须将侦听器添加到您的form而不是button。

从official docs：


  提交表单时将触发submit事件。
  
  请注意，仅在表单元素上触发提交，而不在按钮或提交输入上触发。
  
  表单是提交的，不是按钮。




对代码的重要更改：


1：在displayTable处理函数中，将参数更改为其他名称，而不是taskModel。
为什么？您正在尝试使用taskModel假定它包含任务数据。但是，调用该函数时taskModel的实际值是event数据。默认情况下，处理程序函数在执行时会传递event object（当您感兴趣的事件/动作发生时创建的）作为参数。
2：将taskModel[properties[j]]更改为taskModel[0][properties[j]]
为什么？由于必须将index的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实现。