JavaScript - マウスオーバしたときに処理を呼び出す

mouseenter

mouseenter イベントは、マウスのポインターのホットスポットが最初にイベントが発生した要素の中に移動したときの Element に発生します。mouseentermouseover と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。そのため、深い階層構造では数多くの mouseenter イベントが送信され、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

/* HTML 側 */
<div id="box"></div>

/* JavaScript 側 */
const box = document.getElementById("box");

box.addEventListener("mouseenter", event => {
  console.log("マウスポインターが乗りました");
});
mouseenter イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
5.5103017
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

mouseleave

mouseleave イベントは、マウスのポインターのホットスポットが最初にイベントが発生した要素の中から離れたときの Element に発生します。mouseleavemouseout と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。そのため、深い階層構造では数多くの mouseleave イベントが送信され、著しい性能の問題を引き起こすことがあります。このような場合は mouseout イベントを待ち受けした方が優れています。

/* HTML 側 */
<div id="box"></div>

/* JavaScript 側 */
const box = document.getElementById("box");

box.addEventListener("mouseleave", event => {
  console.log("マウスポインターが離れました");
});
mouseleave イベント
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
5.5103017
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事