JavaScript submit 事件

admin發表於2018-11-06
JavaScriptMIT事件

表單中提交按鈕被點選會觸發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.softwhy.com/" />
<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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104830h5uj26uuu60jmmyy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選submit按鈕會有表單提交動作，所以很多朋友想當然認為submit事件是發生在按鈕自身智商。

其實這是錯誤的，點選提交按鈕，在按鈕自身觸發的是click事件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104904d0p9208x5x5w88in.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選submit按鈕之後，按鈕自身會觸發click事件。

同時會觸發form表單元素上的submit事件，於是就出現表單提交動作。

上述程式碼之所以沒有出現表單提交動作，是因為事件處理函式返回值為false。

關於return false的功能可以參閱JavaScript return false一章節。

點選submit按鈕預設會提交表單，點選圖片按鈕具有同樣效果。

更多內容可以參閱HTML input image按鈕一章節。

下面是一段完整簡單表單驗證程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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，阻止表單的提交動作，否則無論是否成功，表單都會提交。

關於return false的功能可以參閱JavaScript return false一章節。

相關文章