mouseenter()とmouseleave()の2つのイベントは、要素からマウスの出入りだけで発火する便利なイベントです。
この記事では「mouseenterイベントとmouseleaveイベントの使い方」について解説します。また、mouseenterと似ているmouseover、mouseleaveと似ているmouseoutとの違いについても解説します。
- mouseenter/mouseleaveの使い方
- mouseenterとmouseoverの違い
- mouseleaveとmouseoutの違い
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
mouseenterイベントの使い方
mouseenter()は、jQueryのイベントの1つ。マウスが要素の上に載っている状態で発火します。
基本書式は次のようになります。
基本書式
$('セレクタ').mouseenter(function() {
// 処理の内容を書く
});コードを実際に当てはめると、下記のようになります。
<div class="box" id="js-box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>.box {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
}const box = $('#js-box');
box.mouseenter(function () {
alert('mouseenter');
});出力結果
See the Pen mouseenter-alert by ZeroPlus (@zeroplus-programming) on CodePen.
mouseenterイベントによって、マウスを要素の上に載せるだけでalertメソッドが発火するようになります。
mouseenterとmouseoverの違い
mouseenterとmouseoverの2つのイベントは、どちらも要素の上にマウスが乗ったときイベントが発火します。
2つのイベントの違いは「子要素にもイベントが発火するか」ということです。
例えば下記のようなコードでmouseenterの場合とmouseoverの場合とで動きを確認してみましょう。
<div class="box" id="js-box">
<div class="box__inner">mouseenter</div>
</div>
<div class="box2" id="js-box2">
<div class="box__inner">mouseover</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>.box,
.box2 {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
color: #000;
display: flex;
}
.box {
margin-bottom: 20px;
}
.box__inner {
width: 100px;
height: 100px;
cursor: pointer;
background: white;
margin: auto;
}const enter = $('#js-box');
const over = $('#js-box2');
enter.mouseenter(function () {
console.log("mouseenter");
});
over.mouseover(function () {
console.log("mouseover");
});出力結果
コンソール画面を確認すると、mouseenterの場合は子要素にマウスを移動してもイベントは発火しません。mouseoverの場合は、子要素にマウスを移動するとイベントが発火します。
これがmouseenterとmouseoverの違いです。
mouseenterとmouseoverの違い
- mouseenter：イベントが子要素に影響しない
- mouseover：イベントが子要素にも影響する
mouseleaveイベントの使い方
mouseleave()は、jQueryのイベントの1つ。マウスが要素から離れたときに発火します。
基本書式は次のようになります。
基本書式
$('セレクタ').mouseleave(function() {
// 処理の内容を書く
});コードを実際に当てはめると、下記のようになります。
<div class="box" id="js-box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>.box {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
}box.mouseleave(function () {
alert('mouseleave');
});出力結果
See the Pen mouseleace-alert by ZeroPlus (@zeroplus-programming) on CodePen.
mouseleaveイベントによって、要素上にあるマウスを要素の外側に移動しただけで、alertメソッドが発火するようになります。
mouseleaveとmouseoutの違い
mouseleaveとmouseoutの2つのイベントは、要素上にあるマウスを要素の外側に移動するとイベントが発火します。。
こちらもmouseenterとmouseoeverの場合と同様に、「子要素にもイベントが発火するか」という違いがあります。
例えば下記のようなコードでmouseleaveの場合とmouseoutの場合とで動きを確認してみましょう。
<div class="box" id="js-box">
<div class="box__inner">mouseleave</div>
</div>
<div class="box2" id="js-box2">
<div class="box__inner">mouseout</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>.box,
.box2 {
width: 200px;
height: 200px;
cursor: pointer;
background: orange;
color: #000;
display: flex;
}
.box {
margin-bottom: 20px;
}
.box__inner {
width: 100px;
height: 100px;
cursor: pointer;
background: white;
margin: auto;
}const leave = $('#js-box');
const out = $('#js-box2');
leave.mouseleave(function () {
console.log("mouseleave");
});
out.mouseout(function () {
console.log("mouseout");
});出力結果
コンソール画面を確認すると、mouseleaveの場合は子要素にマウスを移動してもイベントは発火しません。mouseoutの場合は、子要素にマウスを移動するとイベントが発火します。
これがmouseleaveとmouseoutの違いです。
mouseleaveとmouseoutの違い
- mouseleave：イベントが子要素に影響しない
- mouseout：イベントが子要素にも影響する
まとめ
mouseenterやmouseleaveなどのマウスカーソル系イベントは、マウスの移動だけでイベントを発火することができます。mouseoutやmouseoverなど挙動が似ているイベントがありますので、うまく使い分けていきましょう。
mouseenterとmouseleaveまとめ
- mouseenter()：マウスを要素の上に載せるとイベント発火
- mouseleave()：マウスを要素から離すとイベント発火
- mouseenter()とmouseover()の違い：mouseenter()はイベントが子要素に影響しない
- mouseleave()とmouseout()の違い：mouseleave()はイベントが子要素に影響しない
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
