HTML原生不支持Observable，需通过CDN引入RxJS（如<script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.js">）后使用rxjs.fromEvent()等创建流；注意DOM元素存在时机、事件对象取值方式及手动清理订阅以防内存泄漏。
HTML 本身没有 Observable API——这是 JavaScript 生态（尤其是 RxJS）的概念，浏览器原生不支持 Observable 构造函数或 fromEvent 等方法。想在 HTML 页面里用 Observable 数据流，必须引入第三方库（最常用的是 RxJS），并配合 DOM 事件、Promise、定时器等手动桥接。
怎么在 HTML 中加载并使用 RxJS 的 Observable
直接通过 <script> 标签引入 CDN 版本是最轻量的启动方式，无需构建工具：
<script src="https://unpkg.com/rxjs@7.8.1/dist/bundles/rxjs.umd.js"></script>
引入后全局会挂载 rxjs 对象，所有操作符和创建函数都从它取，例如：
-
rxjs.Observable.create()创建自定义流 -
rxjs.fromEvent(document, 'click')将 DOM 事件转为流 -
rxjs.interval(1000)创建每秒发射一次的数字流
注意：RxJS 7+ 默认导出是模块化结构，CDN UMD 版才提供全局 rxjs 命名空间；若用 ESM 方式（type="module"），需改用 import { fromEvent } from 'https://cdn.skypack.dev/rxjs@7'。
立即学习“前端免费学习笔记（深入）”；
如何把点击、输入等 DOM 事件转成 Observable 流
fromEvent 是最常用的桥接函数，但它对目标元素有要求：必须在调用时已存在于 DOM 中，否则监听失败（不会报错，但永远收不到值）。
- ✅ 正确做法：确保元素已挂载，或在
DOMContentLoaded后执行 - ❌ 常见错误：在
<head>中脚本立即调用fromEvent(document.getElementById('btn'), 'click')，此时#btn还未解析 - ⚠️ 注意事件对象类型：
fromEvent(inputEl, 'input')发出的是原生InputEvent，要取值得写ev.target.value，不是直接发字符串
示例：监听按钮点击并打印次数
const btn = document.getElementById('my-btn');
const clicks$ = rxjs.fromEvent(btn, 'click');
clicks$.pipe(
rxjs.operators.scan(acc => acc + 1, 0)
).subscribe(count => console.log('已点击', count, '次'));
为什么不能直接 new Observable() 监听 input 输入？
可以 new rxjs.Observable()，但手动实现防抖、取值、取消订阅等逻辑非常容易出错。比如：
- 没调用
observer.complete()或没清理addEventListener，会导致内存泄漏 - 连续快速输入时，若没加
debounceTime，会触发大量无意义计算 -
input事件在中文输入法下行为异常（按下拼音键就触发），应优先用fromEvent(el, 'input')+map+filter过滤空值
更稳妥的做法是组合现成操作符：
const input$ = rxjs.fromEvent(inputEl, 'input').pipe( rxjs.operators.map(ev => ev.target.value), rxjs.operators.filter(val => val.trim().length > 0), rxjs.operators.debounceTime(300) );
Observable 订阅后不自动销毁？小心内存泄漏
DOM 元素被移除、页面跳转、组件卸载时，如果 Observable 还在持续发射（如 interval、fromEvent 绑定在 document 上），而你没主动 unsubscribe()，就会导致闭包引用无法释放。
- 显式保存订阅：
const sub = source$.subscribe(...); sub.unsubscribe(); - 推荐用
takeUntil配合“销毁信号”流，例如：fromEvent(btn, 'click').pipe(takeUntil(fromEvent(window, 'beforeunload'))) - 框架中（如 Angular）可依赖
async管道自动管理；纯 HTML 场景只能自己记、自己清
特别提醒：fromEvent 返回的 Observable 在订阅者取消时，不会自动移除事件监听器——这是 RxJS 的设计，必须靠操作符（如 take(1)、first()）或手动 unsubscribe 触发清理。
