JavaScriptで検知できるマウスのイベントについて調べた

はじめに

久しぶりに JavaScript でマウスイベントを検知してゴニョゴニョやるコードを書いていたら「どういう時に発火するんだっけ？」がちょっと曖昧になっていました。
一回調べ直したメモがこの記事になります。

MDN に記載のあった以下の7イベントについて調べました。

https://developer.mozilla.org/ja/docs/Web/API/Element

検証に使ったHTML

簡単に動作を確認できるページを、以下のURLに用意して検証しました。
疑問点があれば、こちらを試すとわかりやすいかと思います。

https://mryhryki.com/experiment/mouse-events.html

中身は、検証したいイベントごとに親要素と子要素で1セットとなる構造にしています。

親要素に対して addEventListener() を設定してイベントを検知し、イベントが発火するとその時点のマウス座標を表示するようにしています。

検証

mousedown

ポインティングデバイスのボタンが要素上で押されたときに発行されます。 onmousedown プロパティからも利用できます。

マウスがクリックされた時に発火するイベントです。
mouseup との違いは、ボタンが押された時点で発火する点です。

mouseup

ポインティングデバイスのボタンが要素の上で離されたときに発行されます。 onmouseup プロパティからも利用できます。

マウスがクリックされた時に発火するイベントです。
mousedown との違いは、ボタンが押されて戻った時点で発火する点です。

mouseenter

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。 onmouseenter プロパティからも利用できます。

その要素にマウスのカーソルが入った時に発火するイベントです。

mouseover

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。 onmouseover プロパティからも利用できます。

mouseenter に似ていますが、子要素に出入りしたタイミングでも発火するのが違います。

mouseleave

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。 onmouseleave プロパティからも利用できます。

その要素からマウスのカーソルが出た時に発火するイベントです。

mouseout

ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。 onmouseout プロパティからも利用できます。

mouseleave に似ていますが、子要素に出入りしたタイミングでも発火するのが違います。

mousemove

ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。 onmousemove プロパティからも利用できます。

要素上でマウスカーソルが移動した場合に発火するイベントです。