【ポインターイベント】
ポインターイベント とは？
💡 マウスもタッチもペンも、ひとまとめに扱える入力イベントの統一規格
📌 このページのポイント
- マウス・タッチ・スタイラスペンの入力を統一的に扱えるイベントモデル
- pointerdown/pointermove/pointerupなどマウスイベントと同じ感覚で使える
- 筆圧や傾きの情報も取得でき、お絵かきアプリなどの高度な入力処理に対応
ひよこ マウスイベントとタッチイベントって別々に書かないといけなかったの？
ペンギン先生 そうなんだ。昔はmousedownとtouchstartを両方書いて、デバイスごとに処理を分岐させる必要があったんだよ。ポインターイベントならpointerdownひとつでマウスもタッチもペンも対応できるんだ
ひよこ 使い方はマウスイベントと似てるの？
ペンギン先生 ほぼ同じだよ。mousedown→pointerdown、mousemove→pointermove、mouseup→pointerupに置き換えるだけ。イベントオブジェクトにはclientXやclientYも入っているから、マウスイベントからの移行はとても簡単なんだ
ひよこ ペンの筆圧とかも取れるって本当？
ペンギン先生 本当だよ。pressureプロパティで筆圧（0〜1の値）、tiltXとtiltYでペンの傾き、widthとheightで接触面積も取得できるんだ。お絵かきアプリや手書きメモアプリで活躍する機能だね
ひよこ setPointerCaptureって何に使うの？
ペンギン先生 ドラッグ操作のときに便利な機能だよ。element.setPointerCapture(pointerId)を呼ぶと、ポインターがその要素の外に出てもイベントを受け取り続けられるんだ。スライダーをドラッグ中にマウスが要素外に出てもドラッグが途切れなくなるよ
まとめ：ざっくりこれだけ覚えればOK！
「ポインターイベント」って出てきたら「マウスもタッチもペンもまとめて扱える入力イベント」と思えればだいたいOK！
📖 おまけ：英語の意味
「Pointer Events」 ＝ ポインター（指し示す操作）のイベント
💬 Pointer は「指し示すもの」。マウスカーソルも指もペンも、画面上の位置を「指し示す」という共通点でまとめたAPIだよ