用 JavaScript 檢查按鈕是否被點選

  2. 貼士文章
  3. JavaScript 貼士
  4. 用 JavaScript 檢查按鈕是否被點選
Anika Tabassum Era 2023年1月30日 2022年5月1日
JavaScript JavaScript Button JavaScript EventListener
  1. 使用 onclick HTML 屬性檢查 JavaScript 中的按鈕單擊
  2. 使用 onclick 作為 JavaScript 方法
  3. 使用 addEventListener 方法檢查按鈕點選
用 JavaScript 檢查按鈕是否被點選

在 JavaScript 中，onclick 方法和 addEventListener 是最常用的操作動作的方法。

我們將使用 onclick 作為 HTML 屬性來檢查 button 是否被單擊。同樣，我們將通過操作 DOM 繼續使用 onclick 方法進行檢查，稍後我們將看到使用 addEventListener 來了解按鈕單擊是否有效。

使用 onclick HTML 屬性檢查 JavaScript 中的按鈕單擊

在本例中，我們將採用一個 button 標籤元素並新增屬性 onclick。

每當單擊按鈕時，該屬性都會呼叫一個函式。雖然 onclick 完全是一個 JavaScript 方法，但作為一個 HTML 屬性，在點選事件時觸發一個指定的函式是很常見的。

程式碼片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn" onclick="clicked()">Click here</button>
  <script>
   const btn = document.getElementById('btn');
  function clicked(){
    btn.style.background = "purple";
    console.log("CLICKED");
  }
  </script>
</body>
</html>

輸出：

onclick_attribute

在這個例子中，函式 clicked() 有一個程式碼體，每當單擊按鈕時，style background 從灰色變為紫色。

使用 onclick 作為 JavaScript 方法

JavaScript 中的 onclick 只關注一個事件來呼叫回撥函式。該方法還強調執行在方法啟動後宣告的函式體。

但首先，onclick 方法需要遵循一個物件。HTML 元素的 querySelector 在這裡定義了物件。

程式碼片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    button{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>  
  <button id="btn">Click here</button>
  <script>
  const btn = document.getElementById('btn');
    btn.onclick = function(){
      btn.style.color = "yellow";
    console.log("CLICKED!");
    }
  </script>
</body>
</html>

輸出：

onclick_method

在這裡，單擊事件的發生在控制檯中輸出為 CLICKED!並且按鈕樣式也可以將其字型顏色從白色更改為黃色。btn.onclick 方法開始執行相應的函式，從而視覺化單擊後的更改。

使用 addEventListener 方法檢查按鈕點選

通常，舊瀏覽器不支援 addEventListener 方法，但它可以處理多個事件。

在這裡，我們將使用一個事件，click，該事件將處理的函式將觸發按鈕進行更改。此外，我們將在控制檯面板中列印一些內容，以更加確定事件活動。

程式碼片段：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <style>
    input{
      background: gray;
      outline: none;
      border: none;
      padding: 10px;
      border-radius: 3px;
      color: white;
      cursor: pointer;
    }
    p{
      background: white;
      color: gray;
    }
  </style>
</head>
<body>  
  <input type="button" id="btn" value="Click Here">
  <p id="after"></p>
  <script>
    const btn = document.getElementById('btn'); 
    function getItDone(){
      document.getElementById('after').innerHTML = "I am clicked."
      console.log("CLICKED!");
    }
    btn.addEventListener('click', getItDone);
  </script>
</body>
</html>

輸出：

新增事件監聽器

Author: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript Button

相關文章 - JavaScript EventListener