mouseenter、mouseleave、mouseover、mouseoutについて、備忘録としてまとめてみました。

発火回数を確認する

マウスを実際に要素に乗せたり離したりすると、いつ発火しているのかがわかると思います。

mouseenter / mouseleave

マウスが要素に乗った時、またはマウスが要素から離れた時に1度だけイベントが発火します。

子要素には影響しません。

mouseover / mouseout

mouseoverはマウスが要素に乗った時に加え、子要素に乗った時にも発火します。

mouseoutはマウスが要素から離れた時に加え、子要素から離れた時にも発火します。

まとめ

いかがでしたか？

何種類もイベントがあってややこしいですが、普通はmouseenter / mouseleaveを使えばいいんじゃないかな？と思っています。

最後までご覧いただきありがとうございました。