初學者必學：onClick 事件完整介紹

更新日期： 2025 年 4 月 23 日

在網頁中，「點一下」這個簡單動作，其實是開啟互動世界的關鍵。

當你點擊一個按鈕、連結或圖片時，能夠觸發一些反應（例如彈出提示、改變畫面、送出資料）── 這些都仰賴所謂的事件（Event）。

其中，最常用的就是「點擊事件」，而你會看到的寫法有 onclick（HTML）和 onClick（React）。但這兩個是一樣的嗎？它們的本質又是什麼？這篇文章會一步步幫你釐清！

HTML 的 onclick 屬性是什麼？

定義：讓 HTML 具備互動性的起點

在 HTML 中，onclick 是一種「事件屬性（event attribute）」，它的作用是讓你能夠直接指定當使用者「點擊」某個元素時，該執行哪段 JavaScript 程式碼。

這是讓網頁「會動起來」的最基本方式之一。只要在 HTML 標籤上加上 onclick="..."，使用者點擊該元素時，就會自動觸發那段 JavaScript 程式碼。

✅ 最簡單的寫法範例：

<button onclick="alert('你點了我！')">點我</button>

📌 說明：

• 當使用者點下按鈕時，onclick 屬性中的程式碼會被執行。
• alert() 是 JavaScript 的內建函式，用來跳出提示訊息。
• 點擊這個按鈕後，會看到一個訊息框顯示：「你點了我！」

更深入補充說明

🔸 onclick 是屬性，不是語法關鍵字

這點很重要！初學者常誤以為 onclick 是 JavaScript 的一部分，但其實它是DOM（Document Object Model）中，HTML 元素提供的屬性之一。

每個 HTML 元素（像是 <button>、<div>、<a>）在被瀏覽器解讀時，會變成一個 DOM 物件。而這些 DOM 物件上，會有很多「事件屬性」，像是：

• onclick（點擊）
• onmouseover（滑鼠移入）
• onchange（表單變動）
• onkeydown（鍵盤按下）…等等

這些屬性允許我們把 JavaScript 的邏輯「綁上去」。

🔸 為什麼這叫做 inline event handler？

這種寫法叫做 inline handler（內嵌事件處理器），因為你直接在 HTML 裡就寫了 JavaScript 程式碼。

優點 ✅：

• 快速上手、易於測試
• 小型範例或 demo 很方便

缺點 ❌：

• HTML 與 JavaScript 混在一起，程式碼難以維護
• 不能重複使用同一段邏輯
• 一旦功能變複雜，會變得很亂（例如加 if 判斷、操作 DOM 等）

因此，實務上通常會建議改用 JavaScript 動態綁定的方式，將 HTML 結構與邏輯分離。

JavaScript 動態綁定 onclick（推薦用法）

如果你希望程式碼結構更清晰、邏輯更好維護，可以將 JavaScript 寫在 <script> 區塊或獨立的 .js 檔案中，然後用程式碼「選取元素」並綁定事件的方式來達成互動：

<button id="btn">點我</button>

<script>
  // 1. 選取按鈕元素
  const button = document.getElementById('btn');

  // 2. 為它加上點擊事件
  button.onclick = function () {
    alert('我是動態綁定的點擊事件！');
  };
</script>

📌 執行流程說明：

1. 使用 getElementById() 選取具有 id="btn" 的按鈕。
2. 將 onclick 屬性指定為一個函式（function），這個函式會在點擊時被執行。

📦 優點：這種方式的好處？

• ✅ 程式碼可重用、模組化（可抽成函式、事件集中管理）
• ✅ HTML 和 JavaScript 分開，容易維護
• ✅ 可針對多個元素重複綁定相同邏輯
• ✅ 支援更進階的事件處理（例如加防呆、動態切換內容）

🚫 小心：只綁定一次

用 .onclick = 的方式綁定事件，每次指派新函式都會覆蓋掉前一個。若要同時保留多個處理行為，建議改用 addEventListener()：

button.addEventListener('click', function () {
  alert('這樣可以疊加多個事件處理器');
});

React 的 onClick 是什麼？

🔄 React 將事件處理「JSX 化」

在 React 中，我們不再使用傳統 HTML 方式來寫 UI，而是透過一種叫做 JSX 的語法來描述畫面結構。

JSX 看起來很像 HTML，但實際上是 JavaScript 的語法擴充，因此語法規則更接近 JavaScript 本身。

✅ 那 onClick 呢？

在 JSX 裡，React 為了讓事件處理的方式更自然、更符合 JavaScript 的語法規則，將原本 HTML 的小寫 onclick 改成了**駝峰式命名（camelCase）**的 onClick。

📌 簡單來說：React 的 onClick 是 HTML onclick 的進化版本，更貼近 JavaScript 的邏輯思維，讓開發更清晰可維護。

React 中的 onClick 範例

import React from 'react';

function App() {
  const handleClick = () => {
    alert("你點了 React 的按鈕！");
  };

  return <button onClick={handleClick}>點我</button>;
}

📌 說明：

• handleClick 是一個事件處理函式，當使用者點擊按鈕時就會被呼叫。
• onClick={handleClick} 是 JSX 的語法，代表「把這個函式綁定到這個按鈕的點擊事件上」。
• 注意：這裡不要加括號 ()，否則會在畫面渲染時就立刻執行，而不是等使用者點擊才執行。

onClick vs onclick 有什麼不同？

以下是它們的對比表：

React 傳遞參數範例：

有時候你會想在點擊時，傳遞特定參數給事件處理函式，這時可以用箭頭函式包起來：

<button onClick={() => handleClick('小明')}>打招呼</button>

function handleClick(name) {
  alert(`Hello, ${name}！`);
}

⚠️ 小提醒：不要這樣寫！

// 錯誤 ❌：這樣會在一開始就執行，不是等待點擊才執行
<button onClick={handleClick()}>點我</button>

✅ 正確：

// 正確 ✅：傳入函式參考，不會立即執行
<button onClick={handleClick}>點我</button>

// 或帶參數時這樣寫：
<button onClick={() => handleClick("小明")}>點我</button>

小結：你應該記住的幾件事

如果你剛開始學 React 或想學 JavaScript 製作互動式網頁，那 onClick 是你絕對會用到的基本技能！多練習、多寫範例，你很快就能做出真正會「動」的網頁！