事件

事件是我們讓應用程式具有互動性的方式，回應鍵盤和滑鼠等輸入，並對影像載入等變更做出反應。事件在 Preact 中的運作方式與在 DOM 中相同，任何您可能在 MDN 上找到的事件類型或行為都可以在 Preact 中使用。以下為使用命令式 DOM API 註冊事件處理常式的範例

function clicked() {
  console.log('clicked')
}
const myButton = document.getElementById('my-button')
myButton.addEventListener('click', clicked)

Preact 與 DOM API 不同之處在於註冊事件處理常式的方式。在 Preact 中，事件處理常式會以屬性形式宣告式地註冊在元素上，就像 style 和 class 一樣。一般來說，任何名稱以「on」開頭的屬性都是事件處理常式。事件處理常式屬性的值是在該事件發生時要呼叫的處理常式函式。

例如，我們可以透過新增一個 onClick 屬性，並將我們的處理常式函式作為其值，來監聽按鈕上的「click」事件

function clicked() {
  console.log('clicked')
}
<button onClick={clicked}>

事件處理常式名稱與所有屬性名稱一樣，區分大小寫。但是，Preact 會在您在元素上註冊標準事件類型（例如 click、change、touchmove 等）時偵測，並在幕後使用正確的大小寫。這就是為什麼 <button onClick={..}> 即使事件為 "click"（小寫）也能運作的原因。

試試看！

若要完成本章節，請嘗試將您自己的 click 處理常式新增到右側按鈕元素的 JSX 中。在您的處理常式中，使用 console.log() 記錄訊息，就像我們在上面所做的一樣。

在您的程式碼執行後，按一下按鈕以呼叫您的事件處理常式，並移至下一章節。