JavaScript submit 事件

小灰灰 2020-06-02 14:58 445阅读 0赞

# JavaScript submit 事件

表单中提交按钮被点击会触发submit事件。

由于表单提交是最为频繁的页面操作之一，且submit事件有一些细节需要特别注意。

下面将通过代码实例进行一下详细介绍。

**浏览器支持:**

（1）.IE浏览器支持此事件。

（2）.edge浏览器支持此事件。

（3）.火狐浏览器支持此事件。

（4）.Opera浏览器支持此事件。

（5）.谷歌浏览器支持此事件。

（6）.safria浏览器支持此事件。

**代码实例:**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script type="text/javascript">
window.onload = function () {
  let subT=document.getElementById("subt");
  subT.onclick=function(){
    console.log("click事件触发");
    return false;
  }
  subT.onsubmit=function(){
    console.log("submit事件触发");
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  <input type="submit" id="subt" value="提交表单"/>
</form>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1591109893687.png)

点击submit按钮会有表单提交动作，所以很多朋友想当然认为submit事件是发生在按钮自身智商。

其实这是错误的，点击提交按钮，在按钮自身触发的是click事件。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script type="text/javascript">
window.onload = function () {
  let subT=document.getElementById("subt");
  let myform = document.forms[0];
  subT.onclick=function(){
    console.log("click事件触发");
  }
  myform.onsubmit=function(){
    console.log("submit事件触发");
    return false
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  <input type="submit" id="subt" value="提交表单"/>
</form>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1591109874480.png)

点击submit按钮之后，按钮自身会触发click事件。

同时会触发form表单元素上的submit事件，于是就出现表单提交动作。

上述代码之所以没有出现表单提交动作，是因为事件处理函数返回值为false。

点击submit按钮默认会提交表单，点击图片按钮具有同样效果。

下面是一段完整简单表单验证代码实例：

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script type="text/javascript">
function checkForm(form) {
  if(form.username.value == "") {
    alert("用户名不能为空");
    form.username.focus();
    return false;
  }
  if(form.password.value == "") {
    alert("密码不能为空");
    form.password.focus();
    return false;
  }
  return true;
}
window.onload = function () {
  let myform = document.forms[0];
  myform.onsubmit = function () {
    return checkForm(this);
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  姓名:<input type="text" name="username"/><br/>
  密码:<input type="password" name="password"/><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>
```

点击提交按钮可以进行简单的表单验证功能，简单做一下分析：

（1）.点击提交按钮会触发form表单submit事件，进而执行事件处理函数。

（2）.事件处理函数可以对表单值进行简单的是否为空判断，如果为空，那么表示验证失败。

（2）.当表单验证失败，事件处理函数会返回false，阻止表单的提交动作，否则无论是否成功，表单都会提交。