집 > 기사 > 웹 프론트엔드 > JavaScript의 마우스 오버 이벤트 사용법에 대한 자세한 설명

JavaScript의 마우스 오버 이벤트 사용법에 대한 자세한 설명

不言원래의: 2019-01-07 15:27:2326891검색

mouseover 이벤트는 해당 이름으로 표시되는 요소에 마우스 커서가 겹칠 때 발생하는 이벤트입니다. 이번 글에서는 JavaScript에서 mouseover 이벤트의 사용법을 자세히 소개하겠습니다.

먼저 살펴볼까요onmouseover가 무엇인가요?

mouseover 활동은 "이벤트"이고 onmouseover는 이벤트 핸들러입니다.

이벤트 발생 시 실행할 프로세스를 지정하려면 이벤트 핸들러가 필요합니다.

그래서 onmouseover는 마우스 커서가 요소 위에 있을 때 완료되는 처리를 담당하는 이벤트 핸들러입니다.

onmousleave가 무엇인가요?

onmouseover 외에도 onmousleave도 있습니다.

이름에서 알 수 있듯이 마우스 커서가 요소를 떠날 때 트리거되는 이벤트를 처리합니다.

다음 예제에서는 이 두 속성이 사용될 것입니다. 마우스 오버 이벤트의 사용 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
     <div id="div1" style="width: 150px; height: 150px; padding: 10px; background-color:pink; border: 1px solid #000000" onmouseover="over(this)" onmouseleave="leave(this)"></div>
</body>
<script>
    function over(x) {
        x.style.backgroundColor = "blue";
    }
 
    function leave(x) {
        x.style.backgroundColor = "red";
    }
</script>
</html>

위 코드에서는 먼저 div 태그를 사용하여 간단한 사각형을 만들었습니다.

사각형의 배경색은 연분홍으로 지정됩니다.

JavaScript의 마우스 오버 이벤트 사용법에 대한 자세한 설명