UI事件表中Sync/Async分类含义及两类事件差异咨询

• 同步（Sync）事件：事件触发后会立刻在当前代码执行流程里同步派发、处理，会卡住后续代码，必须等事件处理函数跑完才会继续往下执行。简单说就是触发操作和事件处理在同一个“任务队列”里，按顺序来。
• 异步（Async）事件：事件触发后不会马上处理，而是被放到专门的异步任务队列里，等当前所有同步代码都执行完、调用栈空了之后，才会被拿出来执行，不会耽误当前代码的运行。

• 执行时机不同
  • click（同步）：比如点击按钮，浏览器触发click事件后，会立刻执行绑定的处理函数，处理完才会走后面的同步代码。举个例子：

    const btn = document.querySelector('button');
    btn.addEventListener('click', () => {
      console.log('正在处理click事件');
    });
    console.log('这是后续的同步代码');
    // 输出顺序：正在处理click事件 → 这是后续的同步代码
    

  • wheel（异步）：滚动滚轮触发wheel事件时，这个事件会先排队，等当前所有同步代码执行完才会处理。比如：

    window.addEventListener('wheel', () => {
      console.log('正在处理wheel事件');
    });
    console.log('这是后续的同步代码');
    // 输出顺序：这是后续的同步代码 → 正在处理wheel事件
    

• 阻塞表现不同
  • click事件的处理函数如果有耗时操作（比如循环十万次），会直接卡住页面，后续代码、页面渲染都得等它做完，页面会明显卡顿。
  • wheel事件的处理函数就算有耗时操作，也不会卡住当前正在跑的同步代码，只会延迟自己的处理，不会立刻让页面变卡。
• 触发与处理的关联逻辑不同
  • click事件的触发（用户点击）和处理是强绑定的同步流程，用户操作后能马上得到反馈（比如按钮点完立刻变灰），符合日常操作的直观预期。
  • wheel事件的触发（滚轮滚动）和处理是异步的，浏览器会把连续触发的滚轮事件合并处理，避免太频繁触发拖垮性能，所以快速滚动时，事件处理可能会有点延迟，但能保证页面运行流畅。

内容的提问来源于stack exchange，提问作者MaximPro