有情提示：
阅读此博客前，可先阅读博客https://blog.csdn.net/qq_44327851/article/details/135251408对RxJS进行简单的了解。
概念：
fromEvent 是 RxJS 中的一个操作符，用于将事件转换为可观察的对象。它的作用是创建一个可观察对象，该对象会监听指定事件源上特定类型的事件，并在事件发生时发出相应的数据。在 RxJS 中，事件源可以是 DOM 元素、Node.js EventEmitter、WebSocket、Worker 等支持事件的对象。
使用：
eventSource 是事件源对象，eventType 是要监听的事件类型（如 click、input、scroll等）。
import { fromEvent } from 'rxjs';// 创建一个可观察对象来监听指定事件源上的特定类型事件
const eventObservable = fromEvent(eventSource, eventType);
使用场景：
1.监听按钮的点击事件
import { fromEvent } from 'rxjs';// 获取按钮元素
const button = document.getElementById('myButton');// 创建一个可观察对象来监听按钮的点击事件
const clickObservable = fromEvent(button, 'click');// 订阅点击事件，并处理事件
clickObservable.subscribe((event) => {console.log('Button clicked');
});
2.监听输入框的输入事件
import { fromEvent } from 'rxjs';// 获取输入框元素
const input = document.getElementById('myInput');// 创建一个可观察对象来监听输入框的输入事件
const inputObservable = fromEvent(input, 'input');// 订阅输入事件，并处理事件
inputObservable.subscribe((event) => {console.log('Input value changed: ', input.value);
});//输入后延迟一定时间之后才响应
inputObservable.pipe(debounceTime(500),throttleTime(1000)
).subscribe((inputValue) => {if(typeof inputValue === 'object') {inputValue = inputValue.target.value;}
}3.监听文档的滚动事件
import { fromEvent } from 'rxjs';// 创建一个可观察对象来监听文档的滚动事件
const scrollObservable = fromEvent(document, 'scroll');// 订阅滚动事件，并处理事件
scrollObservable.subscribe((event) => {console.log('Document scrolled');
});
4.监听 WebSocket 事件
import { fromEvent } from 'rxjs';// 创建一个 WebSocket 连接
const socket = new WebSocket('wss://example.com');// 创建一个可观察对象来监听 WebSocket 的消息事件
const messageObservable = fromEvent(socket, 'message');// 订阅消息事件，并处理事件
messageObservable.subscribe((event) => {console.log('Received message from WebSocket: ', event.data);
});
5.监听窗口的resize事件
例如：在窗口resize事件发生时，动态改变msg元素的宽度减去10，并且以字符串形式输出的效果
import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';// 监听窗口resize事件
const resizeObservable = fromEvent(window, 'resize');// 订阅resize事件，并对事件进行处理
resizeObservable.pipe(map(() => {const width = this.msg.nativeElement.offsetWidth - 10;return width + 'px';})
).subscribe((widthString) => {console.log('Width: ', widthString);
});
)
