02. 事件

• JSX 中需要传入一个函数，而不是函数调用：<button onClick={handleClick}>
• 按照惯例，事件处理函数应该以 on 开头，后跟一个大写字母

事件参数

事件处理函数接收一个 事件对象 作为唯一的参数。按照惯例，它通常被称为 e ，代表 “event”（事件）。可以使用此对象来读取有关事件的信息。

<button onClick={e => {
  console.log(e)
}}>
</button>

事件传播

在 React 中所有事件都会传播，除了 onScroll

阻止传播

使用：e.stopPropagation()

<button onClick={e => {
  e.stopPropagation();
  onClick();
}}>
</button>

事件捕获

如果内层事件阻止了传播，那么可以通过在事件名称末尾添加 Capture 来实现事件捕获

<div onClickCapture={() => { /* 这会首先执行 */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

阻止默认行为

使用：e.preventDefault()

<form onSubmit={e => {
  e.preventDefault();
  alert('提交表单！');
}}>
  <input />
  <button>发送</button>
</form>