极客观点
项目管理
HarmonyOS
我对 HTML 和 JavaScript 很陌生。下面是示例代码。下面的代码块与 onsubmit 作为表单标签属性一起工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#" onsubmit="functSubmit()">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
但是当我用 addEventListener() 编写下面的代码时，它不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Tags</title>
</head>
<body>
<form id="form1" action="#">
<label for="input1">This text will be passed in CustomeEvent</label>
<input id="input1" type="text" value="default">
<input type="submit" id="bt1">
</form>
<script>
document.getElementById("form1").addEventListener('submit', functSubmit(event));
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}
</script>
</body>
</html>
谁能解释为什么 addEventListener 不起作用？
原文由 user2206366 发布，翻译遵循 CC BY-SA 4.0 许可协议
那是因为您正在立即调用事件侦听器的回调。只需将函数作为参数传递，而不调用它。任何时候提交表单，该函数都会将事件对象传递给它。
附带说明：通常更好的做法是将 HTML 的关注点与 JavaScript 分开。虽然在属性中内联事件处理程序有效，但它耦合了两个独立的问题。为了便于维护，请单独管理您的处理程序。您还可以获得利用事件委托的好处。