RxJS之fromEvent学习

有情提示：

? ? ? ? 阅读此博客前，可先阅读博客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);
});