[javascript] 마우스 오버 이벤트 처리하기
자바스크립트에서 마우스 오버 이벤트를 다루는 것은 웹 페이지 상에서 상호작용을 향상시킬 수 있는 중요한 부분입니다. 이 글에서는 마우스 오버 이벤트를 처리하는 방법에 대해 알아보겠습니다.
이벤트 핸들러 등록하기
마우스 오버 이벤트를 처리하려면 해당 HTML 요소에 이벤트 핸들러를 등록해야 합니다.
const elem = document.getElementById('myElement');
elem.addEventListener('mouseover', function() {
// 마우스 오버 이벤트가 발생했을 때 수행할 작업
});
위 코드에서는 getElementById 메서드로 HTML 요소를 가져와 addEventListener를 사용하여 mouseover 이벤트에 대한 핸들러를 등록하고 있습니다.
이벤트 핸들러 정의하기
이벤트 핸들러는 마우스 오버 이벤트가 발생했을 때 실행될 동작을 정의합니다.
function handleMouseOver() {
// 마우스 오버 이벤트가 발생했을 때 수행할 작업
}
이후 이벤트 핸들러를 등록할 때 생성한 함수를 전달합니다.
elem.addEventListener('mouseover', handleMouseOver);
실제 예제
간단한 예제를 통해 마우스 오버 이벤트를 처리하는 방법을 확인해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script>
function handleMouseOver() {
document.getElementById('myDiv').style.backgroundColor = 'lightblue';
}
</script>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div id="myDiv" onmouseover="handleMouseOver()"></div>
</body>
</html>
위 예제에서 div 요소에 마우스를 올리면 배경색이 ‘lightblue’로 바뀌는 것을 확인할 수 있습니다.
마우스 오버 이벤트는 웹 페이지에서 다양한 상호작용을 구현하는 데 유용하게 활용될 수 있습니다.
이상으로 마우스 오버 이벤트 처리에 대해 살펴보았습니다. 여러분의 프로젝트에 적절히 활용하여 웹 페이지의 상호작용성을 높이는데 도움이 되기를 바랍니다.