await 不能直接等待 DOM 事件，因事件监听器不返回 Promise；必须手动封装为 Promise（如用 {once: true}），才能正确 await 单次事件。
await 在异步事件处理中不会“自动等待事件发生”，它只等待 Promise 完成。事件本身（如 click、input、load）不是 Promise，不能直接 await；必须手动包装成 Promise 才能用 await 等待。
事件监听不能直接 await
JavaScript 的原生事件监听器（如 addEventListener）是回调驱动的，不返回 Promise。以下写法是错误的：
await button.addEventListener('click', handler); // 语法错误：addEventListener 返回 undefined
这会导致 SyntaxError 或运行时静默失败，因为 addEventListener 不返回可 await 的值。
立即学习“Java免费学习笔记（深入）”；
正确方式：封装为 Promise
要实现“等待某个事件触发一次”，需自行构造一个 Promise，在事件回调中 resolve：
- 用
once: true选项（推荐）避免重复监听或手动移除 - 或显式调用
removeEventListener保证只响应一次
✅ 正确示例：
function once(el, event) {<br> return new Promise(resolve => {<br> el.addEventListener(event, resolve, { once: true });<br> });<br>}<br><br>async function handleClick() {<br> console.log('请点按钮');<br> await once(button, 'click');<br> console.log('已点击');<br>}
多个事件顺序等待的注意事项
若需按序等待多个独立事件（比如先点 A 再点 B），可连续 await 多个封装好的 Promise：
await once(btnA, 'click');<br>console.log('A 已点');<br>await once(btnB, 'click');<br>console.log('B 已点');
但要注意：这种写法会阻塞后续逻辑执行，用户必须严格按顺序操作；若事件可能并发或取消，建议改用状态机或事件总线管理。
与 fetch、timeout 等 Promise 原生支持的对比
像 fetch()、setTimeout()（需包装）、FileReader（需 Promise 化）等，本质是“一次性异步操作”，天然适合 await；而 DOM 事件是“长期可触发多次”的被动通知机制，语义不同。强行 await 事件容易误解为“事件自带异步返回值”，其实只是我们赋予它的 Promise 行为。
