【原】盤點JavaScript 事件和方法提交那些事兒

Python進階者 2023-02-10 發(fā)布于廣東

展開全文

回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料

今

日

雞

湯

紛紛暮雪下轅門，風(fēng)掣紅旗凍不翻。

大家好，我進階學(xué)習(xí)者。

一、前言

提交表單時，會觸發(fā) submit 事件，它通常用于在將表單發(fā)送到服務(wù)器之前對表單進行校驗，或者中止提交，并使用 JavaScript 來處理表單。

form.submit() 方法允許從 JavaScript 啟動表單發(fā)送?？梢允褂么朔椒▌討B(tài)地創(chuàng)建表單，并將其發(fā)送到服務(wù)器。

二、事件：submit

1. 提交表單主要有兩種方式。

第一種：

點擊 <input type="submit"> 或 <input type="image">，

第二種：在 input 字段中按下 Enter 鍵。

這兩個行為都會觸發(fā)表單的 submit 事件。

處理程序可以檢查數(shù)據(jù)，如果有錯誤，就顯示出來，并調(diào)用 event.preventDefault()，這樣表單就不會被發(fā)送到服務(wù)器了。

案例：

在文本字段中按下 Enter 鍵。點擊 <input type="submit">。

這兩種行為都會顯示 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>

2. submit 和 click 的關(guān)系

在輸入框中使用 Enter 發(fā)送表單時，會在 <input type="submit"> 上觸發(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>

三、方法：submit

如果要手動將表單提交到服務(wù)器，可以調(diào)用 form.submit()。

這樣就不會產(chǎn)生 submit 事件。這里假設(shè)如果開發(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 >標(biāo)簽設(shè)置type=“reset"屬性可以定義重置按鈕。

<inpu type="reset" value="重置"><button type="reset">重置</button>

當(dāng)單擊重置按鈕時，表單將被重置，所有表單字段恢復(fù)為初始值。這是會觸發(fā)reset事件。1

例：單擊【重置】按鈕，彈出提示，恢復(fù)文本框默認值。

<!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>