這完全是一個(gè)新手問題，但我的第一個(gè) JavaScript 任務(wù)遇到了嚴(yán)重的問題。我決定學(xué)習(xí) JS，并從 TODO 列表開始，但現(xiàn)在我卻陷入了困境。提交表單時(shí)應(yīng)觸發(fā)的事件偵聽器不起作用。當(dāng)我更改事件時(shí)，它會(huì)偵聽“單擊”、“焦點(diǎn)”或“模糊”，它可以工作，但不能與提交一起使用。有人可以提供建議嗎？附言。有沒有簡單的解釋event.preventDefault();？它有什么作用，什么時(shí)候應(yīng)該使用？太感謝了。我的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)});
3 回答
慕村225694
TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
<input>元素不會(huì)引發(fā)submit事件——而是由 元素<form>引發(fā)事件。
（換句話說，您將偵聽器附加到了錯(cuò)誤的元素）
小怪獸愛吃肉
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊
這里做了兩個(gè)更改，事件偵聽器添加到而<form>不是輸入提交，還更改了<input>標(biāo)記以<button>檢查。
對(duì)于e.preventDefault()，基本上它用于阻止默認(rèn)的 HTML 標(biāo)簽行為，例如，<a>單擊標(biāo)簽時(shí)，它們有時(shí)會(huì)將用戶重定向到不同的頁面或域，而且表單提交操作通常也會(huì)將頁面重定向到不同的頁面，例如.preventDefault()將停止此行為，并讓開發(fā)人員決定在表單提交或單擊錨標(biāo)記后應(yīng)該發(fā)生什么<a>，何時(shí)應(yīng)該使用它：這取決于應(yīng)用程序設(shè)計(jì)，因此如果您正在處理的應(yīng)用程序需要一些 HTML 標(biāo)簽的行為有所不同，例如<a>用于<form>執(zhí)行Ajax調(diào)用的標(biāo)簽。
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
TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊
該submit事件僅存在于form元素上。
所以，它是
<html>
...
<form id="form></form>
...
<script>
let form = document.getElementById('form')
form.addEventListener('submit',function(){})
</script>
</html>
- 3 回答
- 0 關(guān)注
- 257 瀏覽
添加回答
舉報(bào)
0/150
提交
取消