• 第五天囉，還不快為自己喝采一下!!☕
• RxJS提供許多內建的功能，讓大家可以快速的組合出我們要的連續技。
• 今天我們先來聊聊前端常用的事件處理。

fromEvent

• RxJS-fromEvent官網定義

• Creates an Observable from DOM events, or Node.js EventEmitter events or others.，簡單來說，就是根據你要監聽的事件，發送相關的事件資料給你。

fromEvent函式定義

• 圖片來源: https://rxjs.dev/api/index/function/fromEvent

• 雖然有四個參數，不過還在學習的我們，先掌握前兩個參數:

1. target: 你目標的DOM，一般來說，我們使用document(註1)
2. eventName: 事件的名稱, ex: click點擊事件, keyup鍵盤事件...等

Case1:來抓個Click點擊事件吧

• stackblitz

import { fromEvent } from 'rxjs';

// 第一步: 建立事件的observable
const obs$ = fromEvent(document, 'click'); //<-- 依序設定 target及eventName

// 第二步: 建立觀察者
const observer = {
  next: (value) => console.log('next', value),
  error: (err) => console.log('error', err),
  complete: () => console.log('compleye'),
};

// 第三步: 訂閱
const clickSub$ = obs$.subscribe(observer);

等等，怎麼沒印出更多資訊呢?

• 放心，在Chrome按下右鍵叫出inspect，開啟console就可以看到啦!
  

Case2: 解析事件資料

• 我們可以取得click的事件資料，自然可以parse出我們要的資訊囉。

• 例如:我想印一下click的座標位置

• stackblitz

...

const observer = {
  // next: (value) => console.log('next', value),
  next: (value) => {
    const { x, y } = value;  //<-- parse出click事件資料，取得x,y座標
    console.log('next',`(${x}, ${y})`); //<-- 印出x,y座標
  },
  error: (err) => console.log('error', err),
  complete: () => console.log('compleye'),
};
...

• 點擊看看，是不是座標都出現啦!?

Case3: 來點進階的，限制時間點擊

• stackblitz

import { fromEvent } from 'rxjs';

...

// 第三步: 訂閱
const clickSub$ = obs$.subscribe(observer);

// 嘗試著點點看右上角的頁面，5秒後就取消訂閱，抓不到點擊!
let time = 5000;
let count = 0;
console.log('=== 你可以開始點擊頁面 ===');
const id = setInterval(() => {
  // console.log((count += 1)); //<--打開可以看到 讀秒
}, 1000);
setTimeout(() => {
  clickSub$.unsubscribe(); // 取消訂閱
  clearInterval(id);
  console.log(`${time}秒到!結束滑鼠偵測`);
}, time);

解析

• 概念很簡單，我們使用setTimeout設定5秒後取消訂閱，是不是超Easy~!

Recap

• fromEvent(target, eventName) 讓我們在事件處理上，也能夠透過Observable的方式來進行。
• 有興趣的朋友，可以來個小作業，將target的click換為keyup，來練習看看取得哪個鍵被按下。
• 邁入第五天囉，堅持到底就能變得更強! 加油! Rock!!

註釋

1. W3School對document的定義