本帖最后由 庶民 于 2023-6-13 15:48 编辑
<!DOCTYPE html>
<html>
<head>
<title>Hook 表单示例</title>
</head>
<body>
<form id="myForm">
<label>
用户名：<input type="text" name="username">
</label>
<label>
密码：<input type="password" name="password">
</label>
<button type="submit">提交</button>
</form>
</body>
</html>
// Hook 方法
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
console.log("表单已提交");
// 在这里进行相应的操作
});
如果表单原先已经侦听了 submit 事件，可以使用事件代理的方式来 Hook 这个事件：
var form = document.getElementById("myForm");
var parent = form.parentNode; // 获取了表单的父元素，并在父元素上添加了一个 submit 事件处理程序。
parent.addEventListener("submit", function(event) {
if (event.target === form) { // 判断事件源是否为表单元素
event.preventDefault(); // 阻止表单的默认提交行为
console.log("表单已提交");
// 在这里进行相应的操作
}
});
| 