14. 事件处理进阶

本节目标：掌握事件对象 e 的用法，理解事件传播机制，能正确阻止冒泡和默认行为。

事件对象 e 怎么用

每个事件处理函数都会收到一个事件对象，通常命名为 e：

function handleClick(e) {
  console.log(e);         // SyntheticEvent 对象
  console.log(e.type);    // "click"
  console.log(e.target);  // 触发事件的 DOM 元素
}

e.target 是触发事件的元素，e.currentTarget 是绑定处理器的元素。大多数情况下它们相同，冒泡场景下不同。

function handleClick(e) {
  console.log(e.target);       // 实际被点击的元素
  console.log(e.currentTarget); // 绑定 onClick 的元素
}

读取表单值

表单事件里 e.target.value 是最常用的操作：onChange={(e) => setValue(e.target.value)}。

阻止默认行为

有些元素自带行为：链接跳转、表单提交、右键菜单。用 e.preventDefault() 阻止：

function Form() {
  function handleSubmit(e) {
    e.preventDefault(); // 阻止页面刷新
    console.log('提交逻辑');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">提交</button>
    </form>
  );
}

和 return false 的区别

原生 DOM 里 return false 能阻止默认行为，React 里不行。必须显式调用 e.preventDefault()。

理解事件传播

事件在 DOM 树里会”冒泡”——从触发元素向上传播到祖先元素。

function Demo() {
  return (
    <div onClick={() => console.log('外层 div')}>
      <button onClick={() => console.log('按钮')}>
        点我
      </button>
    </div>
  );
}

点击按钮，控制台会打印两行：先”按钮”，再”外层 div”。这就是冒泡。

阻止冒泡

有时候你不想让事件往上冒。比如点击关闭按钮，不想触发外层卡片的点击事件：

function Card() {
  function handleClose(e) {
    e.stopPropagation(); // 阻止冒泡
    console.log('只关闭，不触发外层');
  }

  return (
    <div onClick={() => console.log('卡片被点击')}>
      <button onClick={handleClose}>关闭</button>
    </div>
  );
}

阻止冒泡要谨慎

过度使用 stopPropagation 会让事件流变得难以追踪。先想想能不能用条件判断替代。

事件处理器传参

需要传额外参数时，用内联箭头函数：

function List() {
  const items = ['苹果', '香蕉', '橘子'];

  function handleDelete(name) {
    console.log(`删除 ${name}`);
  }

  return (
    <ul>
      {items.map(name => (
        <li key={name}>
          {name}
          <button onClick={() => handleDelete(name)}>
            删除
          </button>
        </li>
      ))}
    </ul>
 );
}

事件对象和参数共存

既要传参又要事件对象，把 e 放最后：onClick={(e) => handleClick(id, e)}。

函数组件没有 this 绑定问题

类组件时代，this 指向是个大坑。函数组件里完全不存在这个问题：

// 类组件的痛点（了解一下就行）
class OldButton {
  handleClick() {
    console.log(this); // undefined！需要 bind
  }
}

// 函数组件，没有 this
function Button() {
  const handleClick = () => {
    console.log('this 不存在，省心了');
  };

  return <button onClick={handleClick}>点击</button>;
}

React 19 只写函数组件

本教程全程使用函数组件 + Hooks，不涉及类组件。this 的问题已经成为历史。

常用事件速查

事件	用途
`onClick`	点击
`onChange`	表单值变化
`onSubmit`	表单提交
`onFocus` / `onBlur`	获得/失去焦点
`onKeyDown` / `onKeyUp`	键盘按下/松开
`onMouseEnter` / `onMouseLeave`	鼠标进入/离开

本节小结

e.preventDefault() 阻止默认行为
e.stopPropagation() 阻止冒泡
传参用内联箭头函数 () => fn(arg)
函数组件没有 this 绑定问题