EventManager / createDoubleTapDetector

AbortController を土台にした、ライフサイクルに閉じたイベントの登録簿です。あわせて、ポインターの種類を問わない、タッチのジェスチャー向けの小さなダブルタップの検出器も入っています。

これが解くのは、リスナーを 外すほう の問題です。removeEventListener が効くのは、登録したときと まったく同じ 関数の参照とオプションを渡したときだけです。渡す途中でハンドラーをアロー関数で包んでしまえば、もう二度と外せません。マウントとアンマウントを繰り返すコンポーネントは、そのたびにリスナーをひとつずつ漏らしていきます。AbortController は、そのすべてを abort() ひと呼びに変えます。

使い方

Web Component の中で

import { EventManager } from 'ranuts/utils';

class MyElement extends HTMLElement {
  private _events = new EventManager();

  connectedCallback() {
    this._events.on(this._input, 'input', this.handleInput).on(this, 'click', this.handleClick, { capture: true });
  }

  disconnectedCallback() {
    this._events.abort(); // すべてのリスナーを外し、次の接続に備えて仕切り直します
  }
}

ふつうのページのコードで

function initSection(container: HTMLElement) {
  const scope = new EventManager();

  scope.on(input, 'input', handleSearch).delegate(container, '[data-action]', 'click', (ev, target) => {
    handleAction(target.getAttribute('data-action'));
  });

  return () => scope.abort(); // その区画を片づけるときに呼びます
}

API

on

このマネージャーに閉じたリスナーを登録します。つないで書けます。

パラメーター

パラメーター	説明	型	既定値
target	イベントの相手	EventTarget	必須
type	イベントの名前	string	必須
handler	ハンドラーの関数	EventListener	必須
options	addEventListener のオプションから signal を除いたもの	Omit<AddEventListenerOptions,'signal'>	-

戻り値

引数	説明	型
this	このマネージャー。つないで書くためのものです	EventManager

delegate

イベントの委譲です。parent に ひとつだけ リスナーを付け、selector に当てはまる子孫からイベントが起きたときにかぎり handler を呼びます。つないで書けます。

ハンドラーは、もとのイベントと、当てはまった要素を受け取ります。

scope.delegate(list, '.item', 'click', (ev, item) => {
  console.log(item.getAttribute('data-id'));
});

パラメーター

パラメーター	説明	型	既定値
parent	ただひとつのリスナーを結び付ける要素	HTMLElement	必須
selector	子孫が当てはまるべきセレクター	string	必須
type	イベントの名前	string	必須
handler	(event, matchedElement) => void	Function	必須
options	addEventListener のオプションから signal を除いたもの	Omit<AddEventListenerOptions,'signal'>	-

戻り値

引数	説明	型
this	このマネージャー。つないで書くためのものです	EventManager

abort

登録したリスナーをすべて外し、内側の AbortController を作り直します。何度呼んでも大丈夫です。そのあとの on() や delegate() は、まっさらなところから始まります。

戻り値

戻り値はありません（void）

signal

土台の AbortSignal です。自分で addEventListener に渡したいときのために公開しています。

引数	説明	型
signal	このマネージャーの中断シグナル	AbortSignal

createDoubleTapDetector

生の (x, y, 時刻) の標本からダブルタップを見分けます。ポインターの種類を問わないので、Pointer、Touch、Mouse のどのイベントから渡しても同じように働きます。タッチのジェスチャー（ダブルタップで頭出し、拡大、いいね）のために作られました。この手の場面では、時刻と距離のしきい値の判定を呼び出しのたびに書き直すと、気づきにくい形で間違えやすいのです。片方の軸しか比べていない、あるいは当たったあとに仕切り直すのを忘れて、素早い 3 回のタップが重なり合ったダブルタップ 2 回として数えられてしまう、といった具合に。

import { createDoubleTapDetector } from 'ranuts/utils';

const detector = createDoubleTapDetector();
el.addEventListener('pointerup', (e) => {
  if (detector.check(e.clientX, e.clientY)) seek();
});

createDoubleTapDetector(options?)

パラメーター（DoubleTapDetectorOptions）

オプション	説明	型	既定値
windowMs	2 回のタップのあいだの、許される最大の間隔（ミリ秒）	number	300
maxDistancePx	2 回のタップのあいだの、平面上で許される最大の距離（px）	number	60

DoubleTapDetector

メンバー	説明	型
check	(x, y) でのタップを記録し、それが直前のタップとダブルタップを成すかどうかを報せます。ダブルタップと見なした時点で追跡を仕切り直すので、素早い 3 回目のタップは同じダブルタップの一部として数えられず、新しい組の始まりになります	(x: number, y: number, now?: number) => boolean
reset	最後に記録したタップを忘れます。タップ以外のジェスチャー（ドラッグなど）が始まったときに呼んでください	() => void