JavaScriptのイベント・オブジェクト

イベント・オブジェクトはマウスクリックなどのイベントを表すDOMインタフェースである。

1 メソッド
1. 1.1 initEvent
2. 1.2 preventDefault
2 インタフェース
1. 2.1 CompositionEvent
2. 2.2 Event
3. 2.3 FocusEvent
4. 2.4 MouseEvent
5. 2.5 InputEvent
6. 2.6 KeyboardEvent
7. 2.7 PointerEvent
8. 2.8 UIEvent
9. 2.9 WheelEvent

イベントのキャンセル

イベントはキャンセル可能である。イベントをキャンセルすると、コンテキストメニュー表示等のデフォルト動作が行われなくなる。

イベントをキャンセルするには、イベントオブジェクトの preventDefault メソッドを使う。

画像を右クリックしてもコンテキストメニューを表示させない例を次に示す。

<img src="/images/portrait.jpg" oncontextmenu="cancelEvent(arguments[0]);" alt="portrait">
<script>
  function cancelEvent(event) {
    event.preventDefault()
  }
</script>

上記HTMLの実行結果を次に示す。

Event

Event インタフェースは次に示すプロパティを持つ。

type
target
currentTarget
eventPhase
bubbles
cancelable
defaultPrevented
composed;

UIEvent

Event
- UIEvent

UIEvent インタフェースは次に示すプロパティを持つ。

view: イベントが生成されたウィンドウを特定する。
detail: イベントのタイプに応じて、イベントの詳細情報を指定する。

FocusEvent

Event
- UIEvent
  - FocusEvent

次に示すイベントのオブジェクトが FocusEvent インタフェースを実装している。

blur

MouseEvent

Event
- UIEvent
  - MouseEvent

MouseEventインタフェースは次に示すプロパティを持つ。

screenX: スクリーン座標系の原点を基準とした、イベント発生時の水平座標
screenY: スクリーン座標系の原点を基準とした、イベント発生時の垂直座標
clientX: イベントが発生した水平座標を、そのイベントに関連付けられたビューポートに対して相対的に示す。
clientY: イベントと関連付けられたビューポートを基準とした、イベントが発生した垂直座標
ctrlKey: Control (コントロール) キー修飾子がアクティブであった場合、true を返す。
shiftKey: シフト（Shift）キー修飾子が有効であった場合、true を返す。
altKey: Alt（代替）キー（または "Option"）修飾子が有効であった場合、true を返す。
metaKey: メタ（Meta）キー修飾子が有効であった場合、true を返す
button: マウスボタンの押下や離脱によるマウスイベントにおいて、どのポインタデバイスのボタンが状態を変化させたかを示すために button を使用しなければならない。
buttons: 任意のマウスイベントにおいて、現在押されているマウスのボタンの組み合わせをビットマスクで表現し、ボタンを使用する必要がある。
relatedTarget: イベントの種類に応じて、UI イベントに関連する二次的な EventTarget を識別するために使用される。

次に示すイベントのオブジェクトがMouseEventインタフェースを実装している。

dblclick

PointerEvent

Event
- UIEvent
  - MouseEvent
    - PointerEvent

PointerEventインタフェースは次に示すプロパティを持つ。

pointerId

イベントを発生させたポインタの一意な識別子

width

ポインタのX軸の大きさをCSSピクセルで指定する。

height

ポインタのY軸の大きさをCSSピクセルで指定する。

pressure

0～1の範囲におけるポインタ入力の正規化された圧力。ここで、0と1はそれぞれハードウェアが検出できる最小圧力と最大圧力を表す。

tangentialPressure

通常、追加のコントロール（エアブラシのスタイラスのフィンガーホイールなど）によって設定される、ポインタ入力の正規化接線圧力（バレル圧力とも呼ばれる）である。

tiltX

tiltY

twist

ペン／スタイラスなどのトランスデューサーの、自身の長軸を中心とした時計回りの回転度数

altitudeAngle

azimuthAngle

pointerType

イベントを発生させたデバイスの種類を示す。

値
mouse
pen
touch

isPrimary

ポインタがこのポインタ型の主ポインタを表しているかどうかを示す。

次に示すイベントのオブジェクトがPointerEventインタフェースを実装している。

contextmenu

ondblclick: HTML要素がダブルクリックされたときに実行するJavaScriptを指定する属性

参考文献

World Wide Web Consortium 2023. UI Events