RxJS 是一个强大的 JavaScript 库，它提供了一种响应式编程的方式来处理异步数据流。其中，fromEvent 操作符是 RxJS 中用于监听 DOM 事件的一个重要工具。本文将详细介绍如何正确地使用 fromEvent 操作符进行事件监听，并提供示例代码和实践指导。
什么是 fromEvent 操作符
fromEvent 操作符是 RxJS 中的一个操作符，它用于从 DOM 元素上监听指定的事件。在 RxJS 中，所有的事件都被看作是一个数据流，而 fromEvent 操作符就是将这个数据流转换成一个 Observable 对象。
fromEvent 接收两个参数，第一个参数是要监听事件的 DOM 元素，第二个参数是要监听的事件类型，例如 click、keydown 等。
const button = document.getElementById('myButton');
const click$ = fromEvent(button, 'click');在上面的代码中，我们通过 fromEvent 操作符创建了一个 click$ 的 Observable 对象，它会监听 button 元素上的 click 事件。
fromEvent 操作符的使用场景
fromEvent 操作符可以用于各种监听 DOM 事件的场景，例如：
- 点击按钮、链接、下拉框等交互元素时触发的事件
- 输入框的输入事件，例如 keydown、keyup、input 等
- 鼠标事件，例如 mouseover、mouseout、mousemove 等
- 滚动事件，例如 scroll、resize 等
如何正确地使用 fromEvent 操作符
虽然 fromEvent 操作符非常方便，但在使用时也需要注意一些问题，下面是一些使用 fromEvent 操作符的注意点：
1. 避免内存泄漏
在使用 fromEvent 操作符时，需要注意避免内存泄漏。因为 Observable 对象会一直存在，直到被手动取消订阅或者页面卸载。如果不及时取消订阅或者销毁 Observable 对象，就会导致内存泄漏。
为了避免内存泄漏，我们可以在组件销毁时手动取消订阅或者销毁 Observable 对象。例如，下面是一个使用 fromEvent 操作符监听按钮点击事件的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - --------- - ---- -----------------
------ ----- ----------- -
------- -------- - --- ----------
---------- -
----- ------ - ------------------------------------
----- ------ - ----------------- ---------
------
-------------------------------
------------- -- -
-- ------
---
-
------------- -
---------------------
-------------------------
-
-在上面的代码中，我们使用了 takeUntil 操作符来在组件销毁时自动取消订阅。同时，我们还创建了一个 destroy$ 的 Subject 对象，用于在组件销毁时手动取消订阅。
2. 避免重复订阅
在使用 fromEvent 操作符时，需要注意避免重复订阅。因为每次订阅 Observable 对象时，都会创建一个新的数据流。
为了避免重复订阅，我们可以使用 share 操作符来共享 Observable 对象。例如，下面是一个使用 fromEvent 操作符监听按钮点击事件的示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ----- - ---- ----------------- ----- ------ - ------------------------------------ ----- ------ - ----------------- ----------------------- ------------------- -- - -- ------ ---
在上面的代码中，我们使用了 share 操作符来共享 click$ 的 Observable 对象。这样，无论订阅多少次，都只会创建一个数据流。
3. 避免频繁触发事件
在使用 fromEvent 操作符时，需要注意避免频繁触发事件。因为每次触发事件时，都会发送一个新的数据流。
为了避免频繁触发事件，我们可以使用 debounceTime 操作符来延迟事件的触发。例如，下面是一个使用 fromEvent 操作符监听输入框的输入事件的示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ------------ - ---- ----------------- ----- ----- - ----------------------------------- ----- ------ - ---------------- --------------------------------- ------------------- -- - -- ------ ---
在上面的代码中，我们使用了 debounceTime 操作符来延迟输入事件的触发时间。这样，只有在用户停止输入 300 毫秒后才会触发输入事件。
示例代码
下面是一个使用 fromEvent 操作符监听按钮点击事件的示例代码：
import { fromEvent } from 'rxjs';
const button = document.getElementById('myButton');
const click$ = fromEvent(button, 'click');
click$.subscribe(() => {
// 处理点击事件
});下面是一个使用 fromEvent 操作符监听输入框的输入事件的示例代码：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ------------ - ---- ----------------- ----- ----- - ----------------------------------- ----- ------ - ---------------- --------------------------------- ------------------- -- - -- ------ ---
实践指导
在实际开发中，我们经常需要监听各种 DOM 事件，例如按钮点击、输入框输入、下拉框选择等。使用 fromEvent 操作符可以方便地将这些事件转换成一个 Observable 对象，从而实现响应式编程。
在使用 fromEvent 操作符时，需要注意避免内存泄漏、重复订阅和频繁触发事件。同时，我们还可以使用其他的 RxJS 操作符来对事件流进行处理，例如 debounceTime、filter、map 等。
总之，正确地使用 fromEvent 操作符可以帮助我们更好地处理 DOM 事件，提高代码的可读性和可维护性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3e4aaa941bf7134764117