UI イベント
概念と使用方法
UI イベント API は、マウスやキーボード入力などのユーザーとの対話を処理するためのシステムを定義します。これには以下のものが含まれます。
- キー入力やマウスクリックなど、特定のユーザー操作で発行されるイベント。これらのイベントのほとんどは
Elementインターフェイス上で発生しますが、リソースの読み込みとアンロードに関連するイベントはWindowインターフェイス上で発生します。 - これらのイベントのハンドラーに渡される、イベントインターフェイス。これらのインターフェイスは
Eventを継承しており、ある種類のユーザーとの対話に特化した追加情報を提供します。例えば、KeyboardEventはkeydownイベントハンドラーに渡され、押されたキーに関する情報を提供します。
インターフェイス
CompositionEvent-
コンポジションイベントのハンドラーに渡されます。コンポジションイベントにより、ユーザーが物理キーボードでは利用できない文字を入力することができます。（訳注：かな漢字変換による入力などが該当します。）
FocusEvent-
フォーカスを受けたり失ったりする要素に関連するフォーカスイベントのハンドラーに渡されます。
InputEvent-
例えば
<input>要素を使用して、ユーザーが何らかの入力を行うことに関連付けられた入力イベントのハンドラーに使用します。 KeyboardEvent-
キーボードを押す／離すイベントのハンドラーに渡されます。
MouseEvent-
マウスの移動、マウスオーバーやマウスアウト、マウスボタンの押す／離すなどのマウスイベントのイベントハンドラーに渡されます。なお、
auxclick、click、dblclickイベントではPointerEventオブジェクトが渡されます。 MouseScrollEvent非推奨;-
非推奨です。 Firefox 専用のスクロールイベント用標準外インターフェイスです。代わりに
WheelEventを使用してください。 MutationEvent非推奨;-
変化イベントハンドラーに渡され、 DOM の変化を通知できるように設計されています。これで非推奨です。代わりに
MutationObserverを使用してください。 UIEvent-
他の UI イベントが継承するベースであり、
loadやunloadなどのイベントに渡されるイベントインターフェイスでもあります。 WheelEvent-
wheelイベントのハンドラーに渡されます。このイベントは、ユーザーがマウスホイールやタッチパッドなどのユーザーインターフェイス部品を回転させたときに発生します。
イベント
abort-
リソースの読み込みが（例えば、ユーザーがキャンセルしたために）中止された場合に発行されます。
auxclick-
ユーザーがポインターの主要ボタン以外のボタンをクリックしたときに発行されます。
beforeinput-
ユーザー入力によって DOM が更新される直前に発行されます。
blur-
要素がフォーカスを失ったときに発行されます。
click-
ユーザーがポインターの主要ボタンをクリックしたときに発行されます。
compositionend-
テキスト生成システム（音声入力プロセッサーなど）がそのセッションを完了した場合に発行されます（例えばユーザーが閉じられた場合など）。
compositionstart-
ユーザーがテキスト生成システム（訳注：かな漢字変換など）で新しいセッションを開始したときに発行されます。
compositionupdate-
テキスト生成システムがそのテキストを新しい文字で更新し、
CompositionEventのdataプロパティの更新を反映したときに発行されます。 -
コンテキストメニューを呼び出す直前に発行されます。
dblclick-
ユーザーがポインターの主要ボタンをダブルクリックしたときに発行されます。
error-
リソースが読み込まれなかったり、処理できなかったりした場合に発行されます（例えば、画像が無効であったり、スクリプトにエラーがあったりした場合）。
focus-
要素がフォーカスを受け取ったときに発行されます。
focusin-
要素がフォーカスを受け取る寸前に発行されます。
focusout-
要素のフォーカスが失われる寸前に発行されます。
input-
DOM がユーザー入力（例えばテキスト入力）で更新された直後に発行されます。
keydown-
ユーザーがキーを押したときに発行されます。
keypress非推奨;-
ユーザーがキーを押したときに、そのキーが文字を生成する場合にのみ発行されます。代わりに
keydownを使用してください。 keyup-
ユーザーがキーを離したときに発行されます。
load-
スタイルシートや画像などの依存リソースをすべて含めて、ページ全体が読み込まれたときに発行されます。
mousedown-
ポインターがある要素の上にあるときに、ユーザーがマウスや他のポインティングデバイスのボタンを押すと発行されます。
mouseenter-
マウスや他のポインティングデバイスが、ある要素またはそのいずれかの子孫の境界の内側に移動したときに発行されます。
mouseleave-
マウスや他のポインティングデバイスが、ある要素とその子孫のすべての境界の外に移動したときに発行されます。
mousemove-
マウスや他のポインティングデバイスが、ある要素の上を移動したときに発行されます。
mouseout-
マウスや他のポインティングデバイスが、ある要素の境界の外に移動したときに発行されます。
mouseover-
マウスや他のポインティングデバイスが、ある要素の上に移動したときに発行されます。
mouseup-
ポインターが要素の上にあるときに、ユーザーがマウスや他のポインティングデバイスのボタンを離したときに発行されます。
unload-
文書または子リソースがアンロードされるときに発行されます。
wheel-
ユーザーがマウスホイールやタッチパッドなどのインターフェイス部品を回転させたときに発行されます。
例
マウスイベント
この例では、マウスイベントを、イベントが発生した X 座標と Y 座標とともにログ出力します。マウスを黄色と赤の四角の中に移し、クリックまたはダブルクリックしてみてください。
HTML
<div id="outer"> <div id="inner"></div> </div> <div id="log"> <pre id="contents"></pre> <button id="clear">Clear log</button> </div> CSS
body { display: flex; gap: 1rem; } #outer { height: 200px; width: 200px; display: flex; justify-content: center; align-items: center; background-color: yellow; } #inner { height: 100px; width: 100px; background-color: red; } #contents { height: 150px; width: 250px; border: 1px solid black; padding: 0.5rem; overflow: scroll; } JavaScript
const outer = document.querySelector("#outer"); const inner = document.querySelector("#inner"); const contents = document.querySelector("#contents"); const clear = document.querySelector("#clear"); let lines = 0; outer.addEventListener("click", (event) => { log(event); }); outer.addEventListener("dblclick", (event) => { log(event); }); outer.addEventListener("mouseover", (event) => { log(event); }); outer.addEventListener("mouseout", (event) => { log(event); }); outer.addEventListener("mouseenter", (event) => { log(event); }); outer.addEventListener("mouseleave", (event) => { log(event); }); function log(event) { const prefix = `${String(lines++).padStart(3, "0")}: `; const line = `${event.type}(${event.clientX}, ${event.clientY})`; contents.textContent = `${contents.textContent}${prefix}${line}\n`; contents.scrollTop = contents.scrollHeight; } clear.addEventListener("click", () => { contents.textContent = ""; lines = 0; }); 結果
キーボードイベントと入力イベント
この例では、keydown、beforeinput、input のイベントをログ出力します。テキストエリアに入力してみてください。 Shift などのキーでは keydown イベントが発生しますが、 input イベントは発生しないことに注意してください。
HTML
<textarea id="story" rows="5" cols="33"></textarea> <div id="log"> <pre id="contents"></pre> <button id="clear">Clear log</button> </div> CSS
body { display: flex; gap: 1rem; } #story { padding: 0.5rem; } #contents { height: 150px; width: 250px; border: 1px solid black; padding: 0.5rem; overflow: scroll; } JavaScript
const story = document.querySelector("#story"); const contents = document.querySelector("#contents"); const clear = document.querySelector("#clear"); let lines = 0; story.addEventListener("keydown", (event) => { log(`${event.type}(${event.key})`); }); story.addEventListener("beforeinput", (event) => { log(`${event.type}(${event.data})`); }); story.addEventListener("input", (event) => { log(`${event.type}(${event.data})`); }); function log(line) { const prefix = `${String(lines++).padStart(3, "0")}: `; contents.textContent = `${contents.textContent}${prefix}${line}\n`; contents.scrollTop = contents.scrollHeight; } clear.addEventListener("click", () => { contents.textContent = ""; lines = 0; }); 結果
仕様書
| Specification |
|---|
| UI Events |