Try htmx

Button click

まずは簡単なところからclickで内容が変わるbutton

<button data-hx-get="api/01-button-click.html">
  Let's click
</button>

api/01-button-click.html

Clicked

hx-target属性で置き換える要素を指定

<button data-hx-get="api/01-button-click.html"
        data-hx-target=".target-01-button-click">
  Let's click
</button>
<span class="target-01-button-click"></span>

hx-trigger属性で任意のeventと修飾子
複数指定可能

once修飾子

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click once">
  Let's click
</button>

delay修飾子

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click delay:3s">
  Let's click
</button>

throttle修飾子

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click throttle:3s">
  Let's click
</button>

textareaなどだとdelayとchangedの掛け合わせでauditみたいになるっぽい

Trigger Filters
event → globalの順で解決を試みるらしい
thisはelement

評価値がtrueの場合だけtriggerされます
ただし、buttonでthis.disabledはtrueでもtriggerされません

ctrlKey

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click[ctrlKey]">
  Let's click with control key
</button>

altKey

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click[altKey]">
  Let's click with alt key
</button>

this

<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click[this.autofocus]"
        autofocus>
  Let's click
</button>

global function

<script>
  function isButton(elm) {
    return elm instanceof HTMLButtonElement
  }
</script>
<button data-hx-get="api/01-button-click.html"
        data-hx-trigger="click[isButton(this)]">
  Let's click
</button>