relatedTargetプロパティ

relatedTargetプロパティは、onmouseoutイベントonmouseoverイベントなどのマウスイベントの発生に関連した要素を返すプロパティ。

構文

event.relatedTarget

戻り値

onmouseoutイベントonmouseoverイベントなどのマウスイベントの発生に関連した要素。

サンプル

1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

イベントに関連した要素の内容:

サンプルの動作について

背景色が黄色のセルから、マウスのカーソルを周辺のセルに移動させると、移動先のセルの内容のテキストを、「イベントに関連した要素の内容:」右横に表示する。

サンプルのソースコード

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>

HTML

<table id="sampleTable">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td id="sampleCell">2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</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>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, プロパティ, マウスイベントオブジェクト, リファレンス パーマリンク