我想向 HTML 元素添加一個事件偵聽器，該元素用自定義行為替換默認行為。我知道添加事件偵聽器的兩種不同方式：(1) 使用 JavaScript 函式addEventListener向 DOM 元素添加事件：
<form class="my-form">
<input type="submit"/>
</form>
<script>
document.querySelectorAll(".my-form").forEach(form => {
form.addEventListener("submit", doSomething);
});
function doSomething(e) {
e.preventDefault();
console.log("Data received");
}
</script>
(2) 使用 HTML 屬性on*：
<form onsubmit="doSomething()">
<input type="submit"/>
</form>
<script>
function doSomething(e) {
e.preventDefault();
console.log("Data received");
}
</script>
然而，第一個做了它應該做的，第二個沒有。第二個代碼仍然使用默認的提交處理程式。所以，我想知道第一個示例的行為是否可以通過 HTML 屬性實作。此外，我想知道通常首選哪種添加事件處理程式的方式。
uj5u.com熱心網友回復：
使用第一個版本 - 但如果您只有一個表單，請不要使用 querySelectorAll。如果您只有一個表單，請為其指定一個 ID 并改用 document.getElementById。
如果你有很多，我會委托：
<div id="formContainer">
<form class="my-form">
<input type="submit"/>
</form>
<form class="my-form">
<input type="submit"/>
</form>
</div>
<script>
document.getElementById("formContainer").addEventListener("submit", function(e) {
e.preventDefault();
console.log("Data received");
});
</script>
做第二個，我們在上個千年里曾經這樣做過
<form onsubmit="return doSomething()">
<input type="submit"/>
</form>
<script>
function doSomething() {
console.log("Data received");
return false
}
</script>
但不推薦
uj5u.com熱心網友回復：
在你呼叫第二種情況下doSomething()不帶引數，所以e會undefined。您需要明確地將事件作為引數傳遞：
<form onsubmit="doSomething(event)">
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357344.html
標籤：javascript html javascript 事件 添加事件监听器
上一篇：如何在反應中按百分比滾動？
下一篇：檢查陣列中是否存在字串