提交时的 JavaScript addEventListener 不起作用
这完全是一个新手问题，但我的第一个 JavaScript 任务遇到了严重的问题。我决定学习 JS，并从 TODO 列表开始，但现在我却陷入了困境。
提交表单时应触发的事件侦听器不起作用。当我更改事件时，它会侦听“单击”、“焦点”或“模糊”，它可以工作，但不能与提交一起使用。有人可以提供建议吗？
附言。有没有简单的解释event.preventDefault();？它有什么作用，什么时候应该使用？
太感谢了。
我的HTML：
<!DOCTYPE html>
<html>
<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)
});
慕容30674783回答
-
慕村225694
<input>元素不会引发submit事件——而是由 元素<form>引发事件。（换句话说，您将侦听器附加到了错误的元素） -
小怪兽爱吃肉
这里做了两个更改，事件侦听器添加到而<form>不是输入提交，还更改了<input>标记以<button>检查。对于e.preventDefault()，基本上它用于阻止默认的 HTML 标签行为，例如，<a>单击标签时，它们有时会将用户重定向到不同的页面或域，而且表单提交操作通常也会将页面重定向到不同的页面，例如.preventDefault()将停止此行为，并让开发人员决定在表单提交或单击锚标记后应该发生什么<a>，何时应该使用它：这取决于应用程序设计，因此如果您正在处理的应用程序需要一些 HTML 标签的行为有所不同，例如<a>用于<form>执行Ajax调用的标签。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);}document.getElementById('newTaskForm').addEventListener('submit', function (event) { event.preventDefault(); submitNewTask(event)});<!DOCTYPE html><html><head> <title>TODO</title></head><body> <div id="headerDiv"> <h1>My To Do List</h1> <form id="newTaskForm"> <input aria-label="Add a new task:" type="text" id="newTaskInput" placeholder="Do the laundry, write a new chapter..."> <button id="submitNewTaskButton" type="submit">+ form</button> </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> -
慕侠2389804
该submit事件仅存在于form元素上。所以，它是<html>...<form id="form></form>...<script>let form = document.getElementById('form')form.addEventListener('submit',function(){})</script></html>
随时随地看视频慕课网APP
相关分类
Html5