relatedTargetプロパティは、onmouseoutイベントやonmouseoverイベントなどのマウスイベントの発生に関連した要素を返すプロパティ。
構文
event.relatedTarget
戻り値
onmouseoutイベントやonmouseoverイベントなどのマウスイベントの発生に関連した要素。
サンプル
| １－１ | １－２ | １－３ |
| ２－１ | ２－２ | ２－３ |
| ３－１ | ３－２ | ３－３ |
イベントに関連した要素の内容：
サンプルの動作について
背景色が黄色のセルから、マウスのカーソルを周辺のセルに移動させると、移動先のセルの内容のテキストを、「イベントに関連した要素の内容：」右横に表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleCell" ).onmouseout = function( $event ){
sampleFn( $event );
};
}
function sampleFn( $event ) {
document.getElementById( "sampleOutput" ).innerHTML = $event.relatedTarget.innerHTML;
}
</script>
window.onload = function () {
document.getElementById( "sampleCell" ).onmouseout = function( $event ){
sampleFn( $event );
};
}
function sampleFn( $event ) {
document.getElementById( "sampleOutput" ).innerHTML = $event.relatedTarget.innerHTML;
}
</script>
HTML
<table id="sampleTable">
<tr>
<td>１－１</td>
<td>１－２</td>
<td>１－３</td>
</tr>
<tr>
<td>２－１</td>
<td id="sampleCell">２－２</td>
<td>２－３</td>
</tr>
<tr>
<td>３－１</td>
<td>３－２</td>
<td>３－３</td>
</tr>
</table>
<p>イベントに関連した要素の内容：<span id="sampleOutput" style="margin-left: 10px;"></span></p>
<tr>
<td>１－１</td>
<td>１－２</td>
<td>１－３</td>
</tr>
<tr>
<td>２－１</td>
<td id="sampleCell">２－２</td>
<td>２－３</td>
</tr>
<tr>
<td>３－１</td>
<td>３－２</td>
<td>３－３</td>
</tr>
</table>
<p>イベントに関連した要素の内容：<span id="sampleOutput" style="margin-left: 10px;"></span></p>
CSS
<style>
#sampleTable td{
width: 100px;
height: 20px;
text-align: center;
}
#sampleCell {
background-color: yellow;
}
</style>
#sampleTable td{
width: 100px;
height: 20px;
text-align: center;
}
#sampleCell {
background-color: yellow;
}
</style>