use*_*366 3 javascript forms events
我是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不工作？
Set*_*eth 12
那是因为你正在立即调用事件监听器的回调.只需将函数作为参数传递,而无需调用它.无论何时提交表单,该函数都会将事件对象传递给它.
document.getElementById("form1").addEventListener('submit', functSubmit);
function functSubmit(event) {
var msg = document.getElementById("input1").value;
alert(msg);
}<!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>
</body>
</html>请注意:通常更好的做法是将HTML的关注点与JavaScript分开.虽然在属性中内联您的事件处理程序,但它会将两个不同的问题联系在一起.出于可维护性的考虑,请单独管理处理程序.您还可以利用事件委派.
| 归档时间： |
|
| 查看次数： |
15891 次 |
| 最近记录： |