【JavaScript】offsetX、offsetYって何?~要素上での座標ですよ~

初めてプログラミングやJavaScriptを勉強するときに
誰しもが混乱する「座標」の概念。

offsetX、offsetYについて、解説です。

例えば、図のように2つの要素があったとしましょう。

現在イベントが発生しているのは、もちろん手前の赤い方ですね。

そこでのX座標、Y座標について指定するのがoffsetX、offsetYという考え方です。