RxJS之fromEvent学习

有情提示:

        阅读此博客前,可先阅读博客https://blog.csdn.net/qq_44327851/article/details/135251408对RxJS进行简单的了解。

概念:

   fromEvent 是 RxJS 中的一个操作符,用于将事件转换为可观察的对象。它的作用是创建一个可观察对象,该对象会监听指定事件源上特定类型的事件,并在事件发生时发出相应的数据。在 RxJS 中,事件源可以是 DOM 元素Node.js EventEmitterWebSocketWorker 支持事件的对象。

使用:

   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);
});

你可能感兴趣的:(学习,前端,angular.js,angular,javascript)