addEventListener 废弃？Chrome 全新 API 更高效、智能
Chromium 团队直接甩出一个Observable api，有人说它是异步事件的终极解决方案，也有人说它会让现在的回调、Promise、甚至 RxJS 写法，全部换一种姿势。
不管你信不信，未来前端处理点击、输入、滚动、WebSocket 这些事件，真的可能要变天了。
一、先讲人话：Observable API 到底是啥？
以前我们写前端事件，基本是这老三样：
原生 addEventListener，写多了就是回调地狱 用 Promise，只适合一次成功/失败，不适合持续事件 上 RxJS，功能强到爆炸，但库大、学习成本高
现在 Observable API 来了，它的思路很简单： 把所有事件，变成一条可以被“观察、操作、组合”的数据流。
你不用再手动绑事件、拆逻辑、写一堆 if-else， 而是像写 SQL 或数组方法一样，声明式地告诉浏览器： 我要什么事件、过滤什么条件、延迟多久、怎么转换。
它就像给异步事件，装了一套可视化流水线。
二、有多爽？几行代码看懂它的威力
不用复杂概念，直接看真实场景。
1. 只监听奇数次点击
以前要自己计数、判断、存变量， 现在一行 filter 搞定：
button.observe('click')
.filter((_, count) => count % 2 !== 0)
.subscribe({
next: () => console.log('只处理奇数点击')
})
2. 搜索输入：防抖+过滤
再也不用手搓防抖节流， 内置 debounce 直接用：
input.observe('input')
.map(e => e.target.value.trim())
.filter(val => val.length > 2)
.debounce(300)
.subscribe({
next: val => fetchSearch(val)
})
3. 滚动节流、防卡顿
滚动这种高频触发事件，直接 throttle 续命：
container.observe('scroll')
.throttle(200)
.subscribe(...)
4. WebSocket 数据流一键处理
消息解析、过滤、订阅一条龙：
ws.observe('message')
.map(e => JSON.parse(e.data))
.filter(msg => msg.type === 'update')
.subscribe(...)
5. 多个事件流组合
复杂交互再也不是 spaghetti code：
switch.observe('change')
.flatMap(() => theme.observe('change'))
.takeUntil(switch.observe('disable'))
.subscribe(...)
看完你会发现： 逻辑变直了、嵌套没了、代码可读了。
三、Observable API vs RxJS：新王要登基？
在这之前，处理复杂异步，基本是 RxJS 一家独大。 但 Observable API 一出来，格局直接变了：
原生支持：未来浏览器自带，不用装库、不用打包、无额外体积 上手极快：语法贴近现代 JS，学习成本大幅降低 性能更稳：原生实现，比第三方库更有优势
这不代表 RxJS 会立刻消失， 复杂场景下它依然是大佬。 但绝大多数业务代码，以后真的可以告别 RxJS 了。
四、这东西现在能用吗？
目前 Observable API 还在提案 + 实验阶段， Chrome 里还不叫 observe，而是用 when，用法基本一致。
但你完全可以重视起来，因为：
背后是 Chromium 团队在推动 设计思路已经非常成熟 极大概率成为未来 Web 标准
换句话说： 现在看不懂，未来半年到一年，你可能看不懂别人的前端代码。
来源：https://mp.weixin.qq.com/s/NKk0aovBJKZRWa05u3h0Iw
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
