relatedTargetとは
- ここで説明する relatedTarget とは次の語句からなるjQueryのEventObjectプロパティです。
- related
- 読み: リレイッド
意味: 関連、相関 - target
- 読み: ターゲット
意味: 的、標的、目的となるもの
relatedTargetプロパティの概要
この EventObject プロパティは、マウスの乗降イベント発生時に、関連要素をオブジェクトとして取得します。
マウスの乗降イベントとは、次のイベントを指します。
関連要素とは
mouseenter と mouseover の場合、イベントが発生する前にマウスポインターが乗っていた要素。
mouseleave と mouseout の場合、イベントが発生した後に、マウスポインターが乗っている要素のことです。
relatedTarget はオブジェクト型ですので、relatedTarget の後に (.) ドット演算子で繋いで id などのプロパティを取得することが可能です。 また、ドット演算子で繋いでメソッドを利用することも可能です。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
var objEventRelatedTarget = eo.relatedTarget;
});サンプルコードと実行結果
ここでは、div の子要素に one() メソッドを使って マウスの乗降イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの relatedTarget プロパティ経由で id の値を取得して表示してみます。
サンプルコード: CSS
<style>
div{
background-color: ##white;
border: thin solid ##black;
margin: 1em;
padding: 1em;
width: fit-content;
}
div div:hover{
background-color: ##lightblue;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="idParent">
<div id="idChild_1"></div>
<div id="idChild_2"></div>
<div id="idChild_3"></div>
<div id="idChild_4"></div>
</div>
<script>...</script>
</body>
- 06-11: div id="idDivParent" (id 属性値に idParent を持つ要素です。 ここでは親要素となります。)
- 07, 08, 09, 10: div (子要素です。この要素らに 4種類のマウス乗降イベントをバインドして関数をアタッチします。)
サンプルコード: script
<script>
$("#idChild_1").one("mouseover", function(eo){
$(this).append(" " + eo.relatedTarget.id);
});
$("#idChild_2").one("mouseout", function(eo){
$(this).append(" " + eo.relatedTarget.id);
});
$("#idChild_3").one("mouseenter", function(eo){
$(this).append(" " + eo.relatedTarget.id);
});
$("#idChild_4").one("mouseleave", function(eo){
$(this).append(" " + eo.relatedTarget.id);
});
</script>
- 02-04: $(#idChild_1).on("mouseover", function(eo){処理}); ( idChild_1 の要素に one() メソッドを使ってマウスオーバーイベントをバインドし、関数をアタッチしています。)
- 03: eo.relatedTarget.id (イベントオブジェクトの relatedTarget プロパティ経由で id の値を取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。)
- 05-13: は前記したコードと類似していますので説明は省略します。
マウスポインターを子要素に乗せたり、または 外したりすることで各のイベントが発生し、 eo.relatedTarget 経由で id値を要素内の末尾に追加表示します。
結果が 全て idParent になってしまうので、サンプルとしては面白くないかもしれませんね。