[JavaScript] イベントオブジェクトに関して

DEMO

※クリックの際に座標とtargetに関する情報を流している。

クリック座標関係

プロパティ名 備考
offsetX/Y targetの左上からの相対座標
pageX/Y documentの左上からの相対座標
clientX/Y ブラウザの左上からの相対座標

targetとcurrentTarget

targetはイベントが発火された要素でcurrentTargetはイベントリスナが登録された要素。

DEMOでは、.boxにイベントリスナと登録しているが、バブリングにより.btnをクリックした際でもイベントが発火する。

そのため、.btnをクリックした際は

target => .btn
currentTarget => .box

となり、.boxをクリックした際には

target => .box
currentTarget => .box

となる。