事件

事件是我们让应用程序具有交互性、响应键盘和鼠标等输入以及对图像加载等更改做出反应的方式。事件在 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 会检测到你何时在元素上注册标准事件类型（单击、更改、触摸移动等），并在后台使用正确的案例。这就是为什么 <button onClick={..}> 即使事件是 "click"（小写）也能工作的原因。

试试看！

要完成本章，请尝试将你自己的单击处理程序添加到右侧按钮元素的 JSX 中。在你的处理程序中，使用 console.log() 记录一条消息，就像我们在上面所做的那样。

你的代码运行后，单击按钮以调用你的事件处理程序并转到下一章。