HTML DOM MouseEvent relatedTarget 속성이란?
HTML DOM에서 MouseEvent의 relatedTarget 속성은 mouseover 또는 mouseout 이벤트가 발생할 때 연관된(관련된) 요소에 대한 참조를 반환합니다.
쉽게 말해, 마우스 포인터가 한 요소에서 다른 요소로 이동할 때 '어디서 왔는지' 또는 '어디로 가는지'를 알려주는 속성입니다. mouseout 이벤트에서는 마우스가 진입하려는 대상 요소가, mouseover 이벤트에서는 마우스가 떠나온 요소가 반환됩니다.
참고로 마우스가 문서 밖이나 요소가 아닌 영역으로 이동한 경우에는 null이 반환될 수 있으므로, 실무에서는 null 여부를 함께 검사하는 것이 안전합니다.
구문(Syntax)
relatedTarget 객체의 참조를 반환하는 기본 구문은 다음과 같습니다.
MouseEventObject.relatedTarget
relatedTarget 속성 활용 예제
아래 예제는 초록색(안전) 영역과 빨간색(위험) 영역으로 구성된 화면에서, 마우스가 영역을 벗어나는 순간(mouseout) 어떤 요소로 이동했는지 relatedTarget을 통해 실시간으로 표시해 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent relatedTarget</title>
<style>
* {
padding: 2px;
margin: 5px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
#outer {
width: 70%;
margin: 0 auto;
padding: 0;
text-align: center;
border: 1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-relatedTarget</legend>
<div id="outer" onmouseout="gameStart(event)">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
function gameStart(event) {
var fetchedID = event.relatedTarget.id;
if(fetchedID !== '')
divDisplay.textContent = 'You are hovering over ' + fetchedID + ' <div> element';
}
</script>
</body>
</html>코드 동작 방식
- 외곽 div(#outer)에 onmouseout 이벤트 핸들러가 등록되어 있습니다.
- 마우스가 #outer 영역을 벗어나면 gameStart() 함수가 호출됩니다.
- 함수 내부에서 event.relatedTarget.id를 통해 마우스가 새롭게 진입한 요소의 ID를 가져옵니다.
- 가져온 ID가 비어 있지 않으면 결과 영역(#divDisplay)에 해당 정보를 출력합니다.
실행 결과
초록색(안전) 영역에 마우스를 올려둔 경우 – 아직 영역을 벗어나지 않았으므로 별도의 메시지가 표시되지 않습니다.
위쪽 빨간색(위험) 영역으로 마우스를 이동한 경우 – relatedTarget이 upper div를 감지하여 메시지를 출력합니다.
아래쪽 빨간색(위험) 영역으로 마우스를 이동한 경우 – relatedTarget이 lower div를 감지하여 메시지를 출력합니다.
정리
relatedTarget 속성은 드래그 앤 드롭 영역 강조, 툴팁 제어, 메뉴 hover 처리 등 마우스 이동 흐름을 추적해야 하는 다양한 UI 인터랙션에서 유용하게 활용됩니다. mouseover/mouseout 이벤트와 함께 사용하면 요소 간 이동 경로를 정확히 파악할 수 있습니다.