HTML onclick 按鈕

在 HTML 中，我們有一個按鈕用於將使用者請求資料提交到伺服器（後端）以驗證和導航網頁。主要是，如果我們使用 onclick 按鈕作為事件屬性，並且所有瀏覽器都支持，那麼無論我們在腳本中使用此事件函數，瀏覽器相容性功能也是如此。當使用者點擊時，該事件就會出現。標籤，會用到，需要在中加入onclick事件元素。然後，當用戶端呼叫或點擊按鈕時，按鈕標籤將在腳本上運行。它在具有 onclick 屬性的 HTML 物件中的特定程式碼行上運行。

onclick 按鈕的工作原理

主要用於在使用者需要點擊按鈕的地方觸發並呼叫函數。如果使用者透過點擊滑鼠， Onclick 事件中的元素，它會呼叫 Javascript 等函數。 …onclick 事件屬性基本上只包含一個在事件後端執行的腳本的值。

文法：

<button name="" value="" onclick> ="function()"/></button>

以上語法是html屬性中onclick事件的基本用法。我們也根據用戶需求客製了活動。

HTML onclick 按鈕範例

下面給出了 html 中 onclick 按鈕的範例：

範例#1

代碼：

<button onclick="Function()">Click</button>
<p id="sample"></p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

輸出：

在上面的範例中，我們建立了javascript函數；此外，當使用者點擊「click」按鈕時，瀏覽器本身會顯示「Welcome」值。

範例#2

代碼：

<p id="sample" onclick="Function()">Click</p>
<script>
function Function() {
document.getElementById("sample").innerHTML = "Welcome";
}
</script>

輸出：

上面的範例也與我們在前面的範例 1 中討論的相同，但這裡我們沒有使用任何 。標籤，而不是我們直接呼叫

中的函數和事件。標籤（段落）標籤。這樣會減少程式碼行數。

範例#3

代碼：

Username: <input type="text" id="user" value="sivaraman"><br>
Password: <input type="text" id="pass"><br><br>
<button onclick="Function()">Click</button>
<script>
function Function() {
document.getElementById("pass").value = document.getElementById("user").value;
}
</script>

 輸出：

在上面的範例中，我們在選擇自動從使用者名稱複製到密碼的「點擊」按鈕後，呼叫 JavaScript 函數將值從使用者名稱複製到密碼。這是onclick事件的基本操作之一。

各種事件中的OnClick事件

• 其他一些事件使用的onclick屬性屬性，例如全域事件處理程序，也是Event handler下的事件處理機制之一，用於處理HTML Elements中的點擊事件。每當用戶請求後引發單擊事件時，它都會按某種順序在滑鼠按下和滑鼠鬆開事件之後觸發。
• 點擊事件也有一些觸發動作；考慮將相同的操作加入到「key-down」事件中，允許不使用滑鼠指標甚至觸控螢幕的使用者使用相同的操作。我們在 javascript 中有一些用於 onclick 事件的內建函數。
• 如果函數接收 MouseEvent 物件作為其唯一參數，則該函數也將是要觸發的事件的元素。一次只會為單一物件分配一個單擊事件處理程序。如果你使用EventTarget.addEventListener()方法，因為它比較靈活。

例如，如果我們想在點擊後更改給定值的顏色。

<div id="example">Click</div>
<script>
document.getElementById('example').onclick = function changeContent() {
document.getElementById('example').innerHTML = "Welcome to my domain";
document.getElementById('example').style = "Color: green";
}
</script>

輸出：

• 在上面的範例中，我們只是呼叫了點擊事件來更改使用者螢幕上的文字顏色。與許多事件觸發函數一樣，它對於執行時間說明書以及使用者需求可能很有用。
• Onclick事件也是圖片物件的屬性；此外，它還包含一個表達式，當使用者點擊按鈕或圖片物件時，該表達式將被計算。 onclick 事件也會根據使用者要點擊圖像的哪一部分執行一些不同的操作。一般來說，處理程序可以在 等 html 屬性中設定。當使用者使用滑鼠遊標點擊時，onclick 中的程式碼將運行，html 屬性名稱不會區分大小寫，因此 onclick 的作用與 onClick 相同，但通常，屬性使用小寫。
• 如果我們使用表單標籤存取網頁，當我們按下移動按鈕時，控制器可以在後端邏輯中驗證使用者需求並顯示結果視圖。它還會重新載入網頁；有時onclick 事件在javascript 驗證中不起作用，即在html 頁面中調用onclick 事件中的函數時，用戶必須進行檢查，並且如果函數onclick() 定義在中，則重命名該函數此時不起作用使用者輸入或按讚按鈕比JavaScript 函數具有更高的優先權。

這裡有一些對在 html 標籤中使用 onclick 事件有幫助的建議。

1.不要使用 onclick=”javascript:function()”，僅在屬性內使用 javascript : like 前綴，如 href 超連結：

2.我們不會像onclick=”function()” 和onclick=”function();” 這樣以分號結尾兩者都可以正常工作，但是使用分號作為函數結束並不是一個好的做法。

3.像onclick、onCLICK 和ONCLICK 這樣的事件屬性都可以工作，但是在通常的實踐中，我們將屬性寫成小寫，甚至javascript 本身也區分大小寫，當我們寫成document.getElementById().onclick =” 時，那麼所有屬性都必須是小寫。

結論

onclick也是javascript函數中的事件觸發器；它可能有助於使用者驗證和瀏覽網頁。在jquery中，我們也使用onclick事件作為使用者自訂需求的主要部分。像，react js，Angular 是我們在 onclick 函數中使用的其他一些框架。它還支援現在大多數現代瀏覽器，如 google chrome、Mozilla Firefox 和 safari 等。在 javascript 中，我們不僅可以處理 onclick 事件函數，還可以用於其他一些屬性，例如「on select,onsubmit, ontoggle,onkeyup」等。根據使用者需求，我們可以在html中使用事件屬性。

以上是HTML onclick 按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！