2017-12-12

[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

となる。