JavaScript로 마우스 오버·아웃 시 웹사이트 배경색 전환하는 방법

JavaScript의 mouseover와 mouseout 이벤트를 활용하면, 마우스가 웹페이지 안으로 들어오거나 밖으로 나갈 때 배경색을 손쉽게 전환할 수 있습니다. 이 튜토리얼에서 그 방법을 단계별로 알아보겠습니다.

HTML

먼저 간단한 HTML 페이지의 마크업입니다:

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your mouse over this page</h1>
  </body>
</html>

이 튜토리얼은 CodePen과 같은 무료 온라인 코드 편집기를 사용하면 훨씬 편리하게 따라 할 수 있습니다.

JavaScript

사용자가 마우스를 웹페이지 위로 올리거나 프레임 밖으로 이동시켰을 때 배경색을 전환하려면, 다음 세 가지 작업이 필요합니다.

웹페이지의 모든 콘텐츠를 감싸는 <body> 요소를 선택한 뒤, 변수에 그 참조를 저장합니다.
window 객체에 mouseover와 mouseout, 두 가지 이벤트 유형을 감지하는 이벤트 리스너를 등록합니다.
두 가지 색상 값으로 backgroundColor 속성을 전환합니다.

body 요소 참조 저장하기

가장 먼저 할 일은 웹페이지의 모든 콘텐츠를 감싸고 있는 <body> 요소의 참조를 변수에 저장하는 것입니다:

const bodyElement = document.querySelector("body")

'마우스 오버' 이벤트 설정하기

이제 사용자가 페이지 위로 마우스를 올렸을 때 이를 감지하는 이벤트를 만들고, 배경색을 빨간색(red)으로 변경하는 함수를 실행해 보겠습니다. JavaScript 파일에 다음 코드를 추가하세요:

const bodyElement = document.querySelector("body")

// 새로 추가한 코드
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

실행해 보면 정상적으로 동작하는 것을 확인할 수 있습니다!

'마우스 아웃' 이벤트 설정하기

그렇다면 사용자가 마우스를 웹페이지 프레임 밖으로 이동시켰을 때는, 배경색을 어떻게 기본값인 흰색(white)으로 되돌릴 수 있을까요?

방법은 간단합니다. 앞서 작성한 window 이벤트 코드를 복사한 뒤, mouseover를 mouseout으로 바꾸고, backgroundColor 값을 "white"로 변경하면 됩니다.

그러면 코드는 다음과 같습니다:

const bodyElement = document.querySelector("body")

window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

// 새로 추가한 코드
window.addEventListener("mouseout", function() {
  bodyElement.style.backgroundColor = "white"
})

잘 동작하네요! 하지만 과연 이것이 이 문제를 해결하는 가장 좋은 방법일까요?

안타깝게도 순수 JavaScript에서는 하나의 이벤트 리스너에 여러 이벤트를 등록할 수 없습니다(jQuery에서는 가능). 만약 가능했다면 코드 중복을 줄일 수 있었을 텐데요.

대신, 이름 있는(named) 함수 두 개를 만들어 각각 window 이벤트 리스너에 전달하는 방식을 사용할 수 있습니다:

const bodyElement = document.querySelector("body")

function mouseOver() {
  bodyElement.style.backgroundColor = "red"
}

function mouseOut() {
  bodyElement.style.backgroundColor = "white"
}

window.addEventListener("mouseover", mouseOver)
window.addEventListener("mouseout", mouseOut)

실행 결과는 이전과 완전히 동일합니다.

위에서 리팩토링한 코드는 이름 없는(익명) 함수를 지양한다는 일반적인 JavaScript 코딩 규칙을 따르기 때문에 훨씬 깔끔합니다.

또한 이 코드는 재사용성도 뛰어납니다. 두 개의 이름 있는 함수는 어떤 종류의 이벤트 리스너에서든 호출할 수 있으므로, 실무의 다양한 상황에서 활용하기 좋습니다.

완성된 코드 데모를 직접 확인해 보세요.

참고로 색상 값은 색상 이름(예: "red") 외에도 hex 값이나 rgba 값을 사용할 수 있습니다.