提交时的JavaScript addEventListener不起作用

Question

这是一个新手问题，但是我的第一个javascript任务遇到了严重的问题。我决定学习JS，并从TODO列表开始学习，现在我一直处于起步阶段。

提交表单时应触发的事件侦听器不起作用。当我更改事件时，它会监听“单击”，“焦点”或“模糊”，但不能使用提交。谁能提供建议？

PS。有event.preventDefault();的简单说明吗？它有什么作用，什么时候应该使用？

感谢一百万。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TODO</title>

</head>
<body>
    <div id="headerDiv">
        <h1>My To Do List</h1>
        <form>
            <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter...">
            <input id="submitNewTaskButton" type="submit" value="+">
        </form>
    </div>
    <div id="tasks">
        <ul id="tasksList">
            <li>Do the laundry</li>
            <li>Walk the cat</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

我的JavaScript：

let newTaskInputForm = document.getElementById('newTaskInput');
let tasksList = document.getElementById("tasksList");
let submitNewTaskButton = document.getElementById("submitNewTaskButton");

function submitNewTask() {
    var newTask = newTaskInputForm.value;
    var newListItem = document.createElement("li");
    var newListTextNode = document.createTextNode(newTask);
    newListItem.appendChild(newListTextNode);
    tasksList.appendChild(newListItem);
}

newTaskInputForm.addEventListener('submit', function (event) {
    event.preventDefault();
    submitNewTask(event)
});