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

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

目次

  1. メソッド
    1. initEvent
    2. preventDefault
  2. インタフェース
    1. CompositionEvent
    2. Event
    3. FocusEvent
    4. MouseEvent
    5. InputEvent
    6. KeyboardEvent
    7. PointerEvent
    8. UIEvent
    9. WheelEvent

イベントのキャンセル

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

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

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

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

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

avator

Event

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

type
target
currentTarget
eventPhase
bubbles
cancelable
defaultPrevented
composed;

UIEvent

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

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

FocusEvent

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

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インタフェースを実装している。

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インタフェースを実装している。

関連記事

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

参考文献

World Wide Web Consortium 2023. UI Events