JavaScriptのマウスイベント一覧【サンプル付き】

それぞれの違いをよく忘れるので、自分用メモ。

mousedown

mousedown要素の中でマウスをクリックするとイベントが発生します。

mouseup

mouseup要素の中でマウスのクリックを離すとイベントが発生します。

mousemove

mousemove要素の中でマウスを動かすとイベントが発生します。

mouseenter

mouseenter要素の中にマウスが移動するとイベントが発生します。

mouseleave

mouseleave要素の外にマウスが移動するとイベントが発生します。

mouseover

mouseover要素の上をマウスが移動するとイベントが発生します。

mouseenterと違い、こちらはバブリングします。

mouseout

mouseout要素の外にマウスが移動するとイベントが発生します。

mouseleaveと違い、こちらはバブリングします。

12

参考
  1. MouseEvent - Web API | MDN

  2. 【JavaScript】mouseover, mouseout, mouseenter, mouseleaveの違いについて図解で理解する。 - Qiita