前面幾天的內容，都比較偏向靜態的 JSX 生成，接下來的幾個篇章，會開始介紹怎麼在 React 上增加網站的互動性（像是點擊按鈕，選取選單，輸入資料等），讓我們開發的 App 跟使用者一起動起來。首先就要來介紹 React 裡面的互動事件 Events，以及觸發後執行的 function：Event Handler。
今天的文章內容參考 React 官方文件的：

• https://zh-hant.react.dev/learn/responding-to-events

在 React 裡使用觸發 Event Handler

要讓我們的 React 觸發 handler，就需要在建立一個觸發後執行的 function，並且在適當的 JSX 當成他的 prop 傳下去。這次之後的文章會需要許多點擊之類的動作，滿推薦直接使用官方文章裡的範例，我也會直接借用他們的範例介紹。
根據文章中的範例，我們建立一個 button 的 UI，但當我們還沒傳入任何東西的時候，我們點擊畫面的按鈕是不會發生任何事情的，因此我們就需要照剛剛前面提到的步驟：

1. 先宣告一個觸發會執行的 function，範例叫做 handleClick（通常事件的 handler 都會用 handle 當開頭）
2. 在剛剛宣告的 handler 裡面寫下實作內容，範例使用 alert 來顯示訊息。
3. 將 handler 當作 prop onClick 傳入 <button> JSX 裡面。

最後會長這樣：

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

完成後再重新點擊按鈕就會發現有對話框跳出（alert 的效果）。除了在 Component return 前宣告 handler，我們也可以直接在傳遞 prop 裡寫成 Inline event handler

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

或者是用 箭頭函式

<button onClick={() => {
  alert('You clicked me!');
}}>

在寫比較短的函式的時候很方便，但通常我們開發都還是習慣於先定義一個 handler function 在傳入，這在後面也會傳到，因為這個 handler 除了在當前的 Component 使用，也可以傳到其他 Component 裡面重複利用。

文章中也有提到一個要注意的地方，就是在傳入 handler function 的時候，不需要在後面加入 ()，不然就會在 render 的時候直接執行，而不是在我們觸發的時候才執行。在寫箭頭函式的 inline function 也記得是寫成 () => {} 來傳入宣告的 function。

在 event handler 中讀取 prop 與 將 event handler 作為 prop 傳遞

在宣告我們的 handler 的時候，我們也可以使用 Component 的 props 來呈現觸發後的 UI 變化，讓我們的 UI 可以隨著 props 有各式各樣的變化。

我們也可以傳入 handler 到我們的 Component 裡面當作 props 使用，讓同樣的 Component 在不同地方的時候觸發事件，有不同的呈現效果。像是文章中的客製化 <Button /> Component。他會藉由讀取 onClick 這個 prop 而有不同的點擊後顯示。

跟像是 <button /> 一樣的內建 Html tag 不同的是，React Component 可以不用像他們一樣有那麼硬性的命名規則 瀏覽器事件名稱（例如 <button> 和 <div> 只支援 onClick 這樣的名稱）。雖說如此，我們在命名還是習慣於用 on 當作開頭，後面就會是觸發的動作，就可以讓我們開發的時候更能準確知道這個 handler 的用法是如何。

無障礙網頁 Accessibility

介紹到 button 使用，在處理點擊的時候，雖然 div 也是有 onClick 事件可以使用，但我們會希望開發者使用更具有 語義化（semantic） 的 tag，像是點擊按鈕就是使用 button，一個列表就是使用 ul 跟 li 等等，幫助瀏覽器可以更能讀懂我們的 UI，甚至能因此幫助開發出一個無障礙的網頁讓大家都能順利瀏覽頁面。
可以參考文章知道更多 Accessibility 跟 semantic tag 的介紹：

• https://hackmd.io/@yachuh/html-semantic-html

小結

關於 event handler 今天先告一個段落，明天會繼續講同一篇文章裡的，事件的冒泡與捕捉（Event bubble and capture），實在開發互動式網站一定需要知道的一個觀念，所以想整理成完整的一篇文章。

今天的文章就到這邊，感謝大家耐心地看完，如果有任何問題與建議歡迎告訴我，明天見，晚安。