mouseenterとは
- ここで説明する mouseenter とは次の語句からなるjQueryのメソッドです。
- mouse
- 読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。 - enter
- 読み: エンター
意味: 入る、入力する
mouseenterメソッドの概要
このメソッドは、セレクタに該当する既存要素にマウスエンターイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているマウスエンターイベントを呼び出します。
マウスエンターとはブラウザ上でマウスポインターが要素の上に乗っている状態を表します。 これは mouseover() と同じように見えますが、 mouseenter() の場合、先祖要素や親要素にイベントのバブリングを起こしません。
イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。 バブリングは「良い」、「悪い」で判断するのではなく、そのような機能であり、状況によってメソッドを選択することが必要です。
構文
サンプルを見る前に構文を確認しておきます。
Selector.mouseenter(Handler(EventObject));
Selector.mouseenter([EventData], Handler(EventObject));
Selector.mouseenter();
- 01: マウスエンターイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているマウスエンターイベントを呼び出します。
サンプルコードと実行結果
ここでは、先祖、親、子の3つの要素を div で構成しています。
この要素らに mouseenter() を使ってマウスエンターイベントをバインドします。 実行されるハンドラーはアニメーションで要素の透過処理を調整するものです。
ここで動作の確認をしていただきたいのは、イベントのバブリングです。 参考として同じハンドラーをマウスオーバーイベントでバインドしているものも用意しましので違いを見てください。
サンプルコード: CSS
<style>
.clsAncestors, .clsParents, .clsChildren{
border: thin solid currentColor;
margin: auto;
padding: 2em;
}
.clsAncestors{
background-color: ##lightblue;
}
.clsParents{
background-color: ##lightgreen;
}
.clsChildren{
background-color: ##lightpink;
}
</style>
- ※ 詳細は割愛しますが 先祖、親、子のそれぞれに背景色を割りあてて要素を視認しやすくしています。
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class ="clsAncestors">
<div class ="clsParents">
<div class ="clsChildren">mouseenter</div>
</div>
</div>
<script>...</script>
</body>
- 06-10: <div class="clsAncestors"></div> (先祖要素です。)
- 07-09: <div class="clsParents"></div> (親要素です。)
- 08: <div class="clsChildren"></div> (子要素です。)
サンプルコード: script
<script>
$("div").mouseenter(function(){
$(this).animate({"opacity":"0"}, 200).animate({"opacity":"1"}, 200);
});
</script>
- 02-04: $("div").mouseenter(Handler) (div 要素にマウスエンターイベントをバインドします。イベントが発生すると Handler が実行されます。)
- 03: animate() (アニメーションを実行するメソッドです。)
下記のサンプルはバブリング動作の違いを視覚的に見る為に mouseover (マウスオーバー) イベントで同じハンドラーを実行するように作成しました。 動作の参考にしてください。