# 🏅Day 20 - React 基礎練習 (5) - 常見的事件處理

我們使用 React 開發時，事件處理是一個關鍵的部分，因為它使得應用程序能夠響應用戶的交互。以下是對 React 事件處理的簡單介紹：

## 什麼是事件處理？
事件處理是指對用戶行為（如點擊、鍵入、滾動等）的回應。在 React 中，事件處理是通過在元素上設置事件處理器來實現的。這些事件處理器可以是函數，當指定的事件發生時，它們會被調用。

## 命名規則
在 React 中，事件使用駝峰式命名法。例如，對於點擊事件，使用 `onClick` 而不是 `onclick`。

## 事件處理函數
事件處理函數可以定義在組件內部，並通過屬性綁定到 DOM 元素上，例如：

function App() {
  const handleClick = () => {
    alert("按鈕被點擊了！");
  };

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

## 以下是常見的事件類別
1. 鼠標事件
`onClick`：當用戶單擊元素時觸發。
`onDoubleClick`：當用戶雙擊元素時觸發。
`onMouseEnter`：當鼠標進入元素邊界時觸發。
`onMouseLeave`：當鼠標離開元素邊界時觸發。
`onMouseMove`：當鼠標在元素上移動時觸發。
`onMouseDown`：當鼠標按下時觸發。
`onMouseUp`：當鼠標鬆開時觸發。

2. 鍵盤事件
`onKeyDown`：當鍵盤按鍵被按下時觸發。
`onKeyUp`：當鍵盤按鍵被鬆開時觸發。

3. 表單事件
`onChange`：當表單元素的值改變時觸發（例如，輸入框、選擇框等）。
`onFocus`：當表單元素獲得焦點時觸發。
`onBlur`：當表單元素失去焦點時觸發。
`onSubmit`：當表單被提交時觸發。

4. 觸控事件
`onTouchStart`：當用戶觸摸屏幕時觸發。
`onTouchMove`：當用戶在屏幕上滑動時觸發。
`onTouchEnd`：當用戶鬆開觸摸時觸發。

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/LYwmgPV?editors=1011)，並完成以下條件：

1. 替 `input` 欄位加上 `onChange` 的事件，當欄位值有變動時則觸發 `setEmail()` 更新值
2. 替 `input` 欄位加上 `onBlur` 的事件，當失去焦點時則觸發 `handleBlurEmail()`
3. 替 `button` 按鈕加上 `onClick` 的事件，點擊時則觸發 `handleSubmit()`

備註：
- 請利用三元運算子的方式，利用點擊按鈕時來切換文字

<!-- 解答：

// 練習區塊
  return (
    <div>
      <h2>註冊表單</h2>
      <div>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleBlurEmail}
          placeholder="電子郵件"
        />
        {error && <p style={{ color: 'red' }}>{error}</p>}
      </div>
      <button class="mt-3 btn btn-primary" onClick={handleSubmit}>提交</button>
    </div>
  );
//區塊結束

-->



| ula         | codepen.io                                                                   |
| ----------- | ---------------------------------------------------------------------------- |
| Miikaa      | [codepen](https://codepen.io/Miikaa/pen/zxBBYGM)                             |
| 老屠        | [codepen](https://codepen.io/fsgfxvlb-the-selector/pen/EayywNw?editors=1011) |
| Zem         | [codepen](https://codepen.io/dgldwqlg-the-vuer/pen/bNeeYKY)                  |
| cks40660    | [codepen](https://codepen.io/CKS40660/pen/MYeeONx)                           |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/dPXXJYO?editors=1011)               |
| jchunnn     | [codepen](https://codepen.io/jchunnn/pen/jErrYbQ?editors=1011)               |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/MYeerwR)                   |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/gbMMoWe)                          |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/YPWWYWV?editors=0010)              |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/WbxxMyw)                              |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/JoKKpBB)                              |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/KwMMZWE?editors=1011)           |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/PwzzEgx)              |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/emzzMOM?editors=0011)              |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/zxBBWNM)                            |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=emzzMRL)                           |
| 蛋白        | [Codepen](https://codepen.io/sjlu-0/pen/LEZZdeP?editors=1011)                |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/wBWWjQN?editors=1011)     |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/zxBBjgN)                           |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/emzzKRW)                          |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/XJKKqLN?editors=1011)           |
| Percy       | [Codepen](https://codepen.io/Percy-Ku/pen/ByzKOOb)                           |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/GgqqBBN?editors=0011) |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/bNeejyL?editors=0011)              |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/NPrrYQM)                           |
| cindy       | [Codepen](https://codepen.io/a50134/pen/yyJJRKg?editors=0011)                |
| wind        | [Codepen](https://codepen.io/wind7y/pen/myEEQyd)                             |
| FangFang    | [Codepen](https://codepen.io/Fang-the-selector/pen/NPrrErp?editors=1011)     |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/qENNgyy)                            |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/yyJJmQB?editors=0011)  |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/VYjKZvX?editors=0011)            |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/XJKjYWd)                           |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/VYjKOZM)                            |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/QwEGvYb?editors=0011) |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/QwEGBEN?editors=1011)              |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/WbxpRMv)                            |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/EayXaYv?editors=0011)             |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/ZYOJWpr)              |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/EayvydK)                           |
| TWLeoC      | [Codepan](https://codepen.io/TWLeoC/pen/gbMxGEg)                             |
| Wen         | [Codepen](https://codepen.io/hsiao-kevin/pen/bNeYKRN?editors=1011)           |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/azZELgG)                          |