[javascript] 자바스크립트 onmouseout 이벤트
참고: https://www.educba.com/javascript-onmouseout/
자바스크립트의 onmouseout 이벤트는 요소의 영역에서 마우스 커서가 나가면 특정 작업을 수행하고, 특정 구문을 실행하고, 함수를 호출하는 자바스크립트 이벤트입니다.
해당 이벤트를 사용 중인 요소의 자식 요소는 상위 요소에 정의된 이 이벤트의 영향을 받지 않습니다. 이 이벤트는 마우스 커서가 요소 영역안쪽으로 이동할 때 호출되는 onmouseover 이벤트와 함께 자주 사용됩니다.
onmouseout 이벤트는 mouseout 이벤트를 실행하는 GlobalEventHandlers mixing에서 제공하는 이벤트 핸들러 속성입니다.
onmouseout 문법
다음 구문은 onmouseout 이벤트를 호출하는 방법과 전달해야 하는 매개변수 항목을 설명합니다.
elementOfDOM.onmouseout = nameOfFunction;여기서 elementOfDOM은 document의 요소를 나타내며 마우스 커서가 요소 영역에서 나갈 때 onmouseout 이벤트를 활성화하고 특정 작업을 수행합니다. nameOfFunction는 mouseout 이벤트 발생 시 실행하는 모든 구문과 코드를 포함하는 함수 이름입니다.
onmouseout 작동과 사용 방법
마우스 커서가 요소의 외부 영역으로 이동할 때마다 mouseout 이벤트가 발생합니다. mouseleave 이벤트 와는 다르게 해당 요소의 자식 요소에는 onmouseout 이벤트가 적용되지 않습니다. onmouseout 이벤트는 하위 요소에서 커서를 밖으로 이동시킬 때 기능이 실행되지 않는다는 점에서 하위 요소의 영역은 요소의 영역으로 간주하지 않는다는 것을 알 수 있습니다.
mouseout 이벤트는 MouseEvent 인터페이스의 이벤트이며 이 이벤트의 핸들러 속성은 onmouseout 입니다. mouseout 이벤트는 버블링 패턴을 따르며 취소할 수 있습니다. mouseout 이벤트와 mouseleave 이벤트는 서로 다릅니다. mouseout 이벤트는 요소 수준에만 적용되는 반면, mouseleave 이벤트는 이벤트가 정의된 모든 하위 요소와 기본 요소에 적용됩니다. 자바스크립트에서는 onmouseout 이벤트를 여러 상황, 시나리오에서 사용할 수 있습니다. 예를 들면, 요소에서 마우스를 밖으로 이동시키면 이미지가 축소되고 onmouseover 이벤트가 발생하면 해당 요소가 확대할 수도 있습니다.
onmouseout 이벤트 예제 1
다음의 예제에서는 이미지를 64 픽셀 크기로 img 요소에 표시하고 요소에 마우스를 이동시키면 크기를 128 픽셀로 늘린 다음 마우스가 밖으로 이동하면 다시 원래 크기인 64 픽셀로 조정해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<img onmouseover="onmouseoverFunction(this)" onmouseout="onmouseoutFunction(this)" src="https://images.unsplash.com/photo-1686481394225-dba348a3ee0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80" width="64" height="64">
<p>마우스를 이미지에 가져가면 onmouseoverFunction() 실행.</p>
<p>마우스를 이미지에 밖으로 옮기면 onmouseoutFunction() 실행.</p>
<script>
function onmouseoverFunction(x) {
x.style.height = "128px";
x.style.width = "128px";
}
function onmouseoutFunction(x) {
x.style.height = "64px";
x.style.width = "64px";
}
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
이제 이미지에 마우스 커서를 가져가면 다음과 같이 이미지가 확대 되는 것을 확인할 수 있습니다.
그 다음 마우스 커서를 이미지에서 떼면 이미지는 다시 원래 크기로 돌아갑니다.
onmouseout 이벤트 예제 2
완료해야 하는 작업 목록을 나열하고 해당 목록 요소에 이벤트를 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<ul id="Tasks" onmouseout="onmouseoutFunction(this)" onmouseover="onmouseoverFunction(this)">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<script>
function onmouseoutFunction(x) {
x.style.color = "Green";
}
function onmouseoverFunction(x) {
x.style.color = "Red";
}
</script>
</body>
</html>위의 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다.
기본으로 검정색 목록을 볼 수 있습니다. 여기에 마우스 커서를 가져가면 빨간색으로 변경됩니다.
이 후 마우스 커서를 떼면 녹색으로 변합니다.
정리
자바스크립트에서 onmouseout 속성을 mouseout 이벤트의 핸들러로 사용하여 특정 액션을 수행하거나 mouseout 이벤트에 연결된 함수를 호출하여 특정 코드를 실행했습니다. 이는 요구 사항에 따라 웹 개발시 많은 경우에 사용할 수 있습니다. mouseout 이벤트는 요소 수준에서 적용되며 요소의 하위 항목에는 이벤트가 자동으로 적용되지 않습니다.