整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
提交表單時，會觸發(fā) submit 事件，它通常用于在將表單發(fā)送到服務器之前對表單進行校驗，或者終止提交，并使用 JavaScript 來處理表單。
form.submit() 方法允許從 JavaScript 啟動表單發(fā)送。可以使用此方法動態(tài)地創(chuàng)建表單，并將其發(fā)送到服務器。
第一種 ：
點擊 或 ，
第二種 ：在 input 字段中按下 Enter 鍵。
這兩個行為都會觸發(fā)表單的 submit 事件。
處理程序可以檢查數(shù)據(jù)，如果有錯誤，就顯示出來，并調(diào)用 event.preventDefault()，這樣表單就不會被發(fā)送到服務器了。
在文本字段中按下 Enter 鍵。點擊 。
這兩種行為都會顯示 alert，而因為代碼中的 return false，表單不會被發(fā)送到別處。
<form onsubmit="alert('submit!');return false">
First: Enter in the input field
<input type="text" value="text"><br>
Second: Click "submit": <input type="submit" value="Submit">
</form>在輸入框中使用 Enter 發(fā)送表單時，會在 上觸發(fā)一次 click 事件。
這很有趣，因為實際上根本沒有點擊。
例 ：
<form onsubmit="return false">
<input type="text" size="30" value="Focus here and press enter">
<input type="submit" value="Submit" onclick="alert('click')">
</form>如果要手動將表單提交到服務器，可以調(diào)用 form.submit()。
這樣就不會產(chǎn)生 submit 事件。這里假設如果開發(fā)人員調(diào)用 form.submit()，就意味著此腳本已經(jīng)進行了所有相關(guān)處理。
有時該方法被用來手動創(chuàng)建和發(fā)送表單，如下所示：
<script>
let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';
form.innerHTML = '<input name="q" value="test">';
// 該表單必須在文檔中才能提交
document.body.append(form);
form.submit();
</script>
運行結(jié)果：
為< input >或< button >標簽設置type=“reset"屬性可以定義重置按鈕。
input type="reset" value="重置">
<button type="reset">重置</button>
當單擊重置按鈕時，表單將被重置，所有表單字段恢復為初始值。這是會觸發(fā)reset事件。1
例：單擊【重置】按鈕，彈出提示，恢復文本框默認值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="t" id="t" />
<input type="reset" name="重置"/>
</form>
<script>
var t = document.getElementsByTagName("input")[0];
var f = document.getElementById("form1");
f.onreset = function(e){
alert(t.value);
}
</script>
</body>
</html>運行結(jié)果：
注：
在提交表單禁用提交按鈕的時候，應該在“submit”事件添加事件處理函數(shù)。不要用click。
因為不同的瀏覽器存在時差，有的瀏覽器會在觸發(fā)表單的submit事件之前觸發(fā)click事件，有的在這之后。
本文基于JavaScript基礎，介紹了 事件和方法提交， submit 和 click 的關(guān)系對比。通過案例的分析，在實際應用需要注意的點，遇到的問題，提供有效的解決方案。
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。
實例
Mouse Over Me
Click Me
對事件做出反應
我們可以在事件發(fā)生時執(zhí)行 JavaScript，比如當用戶在 HTML 元素上點擊時。
如需在用戶點擊某個元素時執(zhí)行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
當用戶點擊鼠標時
當網(wǎng)頁已加載時
當圖像已加載時
當鼠標移動到元素上時
當輸入字段被改變時
當提交 HTML 表單時
當用戶觸發(fā)按鍵時
在本例中，當用戶在 <h1> 元素上點擊時，會改變其內(nèi)容：
實例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
</body>
</html>
本例從事件處理器調(diào)用一個函數(shù)：
實例
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>
HTML 事件屬性
如需向 HTML 元素分配 事件，您可以使用事件屬性。
實例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點這里</button>
在上面的例子中，名為 displayDate 的函數(shù)將在按鈕被點擊時執(zhí)行。
使用 HTML DOM 來分配事件
HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：
實例
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
在上面的例子中，名為 displayDate 的函數(shù)被分配給 id=myButn" 的 HTML 元素。
按鈕點擊時Javascript函數(shù)將會被執(zhí)行。
onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發(fā)。
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
實例
<body onload="checkCookies()">
onchange 事件
onchange 事件常結(jié)合對輸入字段的驗證來使用。
下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內(nèi)容時，會調(diào)用 upperCase() 函數(shù)。
實例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標移至 HTML 元素上方或移出元素時觸發(fā)函數(shù)。
實例
一個簡單的 onmouseover-onmouseout 實例：
Mouse Over Me
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發(fā) onmousedown 事件，當釋放鼠標按鈕時，會觸發(fā) onmouseup 事件，最后，當完成鼠標點擊時，會觸發(fā) onclick 事件。
實例
一個簡單的 onmousedown-onmouseup 實例：
Thank You
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039我們一起飛！
TML DOM 允許 JavaScript 對 HTML 事件作出反應。
實例
Mouse Over Me
Click Me
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
