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

onclick（點擊）

onmouseover（滑鼠移入）

onchange（表單變動）

onkeydown（鍵盤按下）…等等

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

🔸 為什麼這叫做 inline event handler？

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

優點 ✅：

快速上手、易於測試

小型範例或 demo 很方便

缺點 ❌：

HTML 與 JavaScript 混在一起，程式碼難以維護

不能重複使用同一段邏輯

一旦功能變複雜，會變得很亂（例如加 if 判斷、操作 DOM 等）

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

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

如果你希望程式碼結構更清晰、邏輯更好維護，可以將 JavaScript 寫在

📌 執行流程說明：

使用 getElementById() 選取具有 id="btn" 的按鈕。

將 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