Javascript RxJS，为什么fromEvent（）为每个订阅注册一个新事件？

假设我们有以下代码

const clickEvent$ = fromEvent(document, 'click').pipe(
    pluck('target')
);

clickEvent$.pipe(
    filter(node => node.id === 'button1')
).subscribe(() => {
    console.log('Button 1 clicked!');
});

clickEvent$.pipe(
    filter(node => node.id === 'button2')
).subscribe(() => {
    console.log('Button 2 clicked!');
});

当我查看调试器中注册的事件时，我看到文档上注册了两个单击事件。在增加对

clickEvent$

的订阅数时，注册到文档的事件数也会随着每次订阅而增加

相比之下，下面的代码只注册一个事件，而不管我在

switch

语句中添加了多少个案例

document.addEventListener('click', (event) => {
    switch (event.target.id) {
        case 'Button1':
            console.log('Button 1 clicked!');
            break;
        case 'Button2':
            console.log('Button 2 clicked!');
            break;
    }
});

所以我的问题是：-

• 为什么每次订阅clickEvent$（或任何DOM事件流）都会向文档中添加新事件
• 当存在100个或更多订阅时，它会如何影响性能
• 有没有办法只向documen添加一个事件侦听器

以下是我对冷热观测的了解

• 默认情况下，从DOM事件创建的所有可观察序列都是热的和共享的
• 在热可观测的情况下，订阅者仅从订阅时开始接收事件。而在冷可观测事件的情况下，订户接收可观测事件能够产生的所有事件

• share（）

  运算符可用于使冷态可观察到热态

---

谢谢

通过单击

运行代码片段

可以看到，答案是肯定的，每次您

订阅

到

单击$

流时，都会附加侦听器

每次订阅生成的Observable时，事件处理程序函数都将注册到给定事件类型的事件目标。当该事件触发时，作为第一个参数传递给注册函数的值将由输出Observable发出。当Observable被取消订阅时，函数将从事件目标中取消注册

const{fromEvent}=rxjs；
const{mapTo}=rxjs.operators；
const target=document.getElementById（'test'）；
/*忽略，调试*/
const$delegate=target.addEventListener；
target.addEventListener=（…args）=>{
log（“注册侦听器”）；
返回$delegate.apply（目标，参数）；
};
/* // */
const click$=fromEvent（目标为“click”）；
单击$.pipe(
映射到（“流1：单击”），
).subscribe（console.log）；
单击$.pipe(
映射到（“流2：单击”），
).subscribe（console.log）

单击此处
这就是它的工作原理。您需要共享或共享重播。是的，使用share（）操作符确实解决了这个问题，但是默认情况下使用fromEvent（）hot创建的不可观察对象，如果是，那么为什么我们需要共享一个已经很热的可观察对象。
share
创建了
多播可观察对象，它们很热，但它们的特性是多播
fromEvent
创建
hot
可观察到的内容，从某种意义上说，数据是不受控制的，而这些内容不是多播的。