表单提交事件和重置事件
事件名 |
作用 |
reset |
表单被重置事件 |
submit |
表单被提交事件 |
当表单中type=submit
的button
元素或者input
元素,点击时,都会触发表单的submit(提交)
事件。
当表单中type=reset
的button
元素或者input
元素,点击时,都会触发表单的reset(重置)
事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<form action="./demo01.html">
<label for=""><input type="text" name="age"/></label>
<button>提交</button>
<button type="reset">重置</button>
</form>
<script>
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
console.log("触发了表单的提交事件");
event.preventDefault();
});
form.addEventListener("reset", function(event) {
console.log("触发了表单的重置事件");
event.preventDefault();
});
</script>
|
案例源码

但是要注意一点:提交事件或重置事件都是只能绑定在form
元素上的,我们点击了提交按钮或者重置按钮,触发了这些事件,仅仅是因为这两个按钮本身有一个默认的行为,不牵扯事件冒泡。从下面的案例可以来验证:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<form action="./demo01.html">
<label for=""><input type="text" name="age"/></label>
<button>提交</button>
<button type="reset">重置</button>
</form>
<script>
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
console.log("触发了表单的提交事件");
event.preventDefault();
});
form.addEventListener("reset", function(event) {
console.log("触发了表单的重置事件");
event.preventDefault();
});
var submitBtn = document.querySelector("button");
var resetBtn = document.querySelector("button[type=reset]");
submitBtn.addEventListener("submit", function(event) {
console.log("触发了按钮的提交事件");
});
resetBtn.addEventListener("reset", function(event) {
console.log("触发了按钮的重置事件");
});
</script>
|
案例源码

从控制台可以看出,点击提交或者重置按钮,被触发的是form
元素上绑定的事件,按钮本身上绑定的事件并没有执行。