<html>
    <head>
        <meta charset="UTF-8">
        <title>RxJs</title>
        <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>
    </head>
    <body>
        <button type="button">BUt</button>
    </body>
    <script>
        const {fromEvent} = rxjs;
        let count = 0;

        const button = document.querySelector('button');

        //javascript　書き方(即時関数で記述した)
        // button.addEventListener('click', (() =>{
        //     return (event) => console.log(`cont: ${++count}`)
        // })(0));

        //RxJS　書き方
        // fromEvent(button,'click').subscribe(
        //     (count)=> console.log(`count: ${++count}`)
        // );

    </script>
</html>

RxJSを使用するため、今回head部にCDNを読み込ませています。
fromEventを使用してbuttonのclickイベント処理を記述しています。
https://rxjs.dev/api/index/function/fromEvent

(count)=> console.log(`count: ${++count}`)の部分を、

(event)=> console.log(event.type)に書き換えるとconsoleでの出力結果は変わります。

event.typeというのは、fromEvent(button,'click').subscribe(の行で記載している、
'click'イベントのことです。

RxJSの書き方をレベルアップしてみる

上記のコードから、改善します結果は、一番上のコードと同じです。pipe()が追加されました。

//省略
        const {fromEvent} = rxjs;
        const {scan} = rxjs.operators;
        //let count = 0;

        const button = document.querySelector('button');

        //RxJS　書き方
        fromEvent(button,'click')
        //subscribeで実行された結果pipeがバケツのように蓄積するイメージ。
        //
        .pipe(
            //アロー関数で記述。第一引数:どういう処理にするか記述、第二引数：初期値を入力
            scan((count) => ++count, 0)
        )
        .subscribe(
             (count)=> console.log(`count: ${count}`)
        );
//省略

補足

他にも便利なオペレータが沢山あります。 scan関数や、他にも様々な使用する関数がありますがそれはrxjsではオペレータと呼ぶらしい。

例えば、throttleTimeとかもオペレータと呼びます。

        .pipe( //subscribeの前に処理を挟む際に、pipeを記載
            throttleTime(3000),//3秒たたないと、次の処理を送らない処理(いくらクリックしても3秒以内は処理を送らない。)
            scan((count)=> ++count, 0)//受け取る値をどうするかを関数で書く。
        )

以下のRxJS公式サイトで、色々見ると勉強なると思います。
https://rxjs.dev/guide/operators

RxJS JavaScriptで clickイベント記述 比較

RxJSの書き方をレベルアップしてみる

補足

RxJS　JavaScriptで　clickイベント記述　比較