Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript를 사용하여 웹사이트에서 배경색을 전환하는 방법(마우스오버 시)

JavaScript의 mouseover를 사용하여 웹사이트 안팎으로 마우스를 이동할 때 웹사이트의 배경색을 전환하는 방법을 알아보세요. 및 mouseout 이벤트.

HTML

다음은 간단한 HTML 페이지에 대한 몇 가지 마크업입니다.

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

CodePen과 같은 무료 온라인 텍스트 편집기를 사용하여 이 튜토리얼을 따라갈 수 있습니다.

자바스크립트

사용자가 웹사이트 프레임 위로 또는 외부로 마우스를 이동할 때 웹사이트 배경색을 전환하려면 다음을 수행해야 합니다.

  • 타겟 <body> 요소에 대한 참조를 변수에 저장합니다.
  • window에서 이벤트 리스너 설정 두 가지 이벤트 유형인 mouseover를 수신하는 객체 및 mouseout
  • backgroundColor 전환 두 가지 색상 값이 있는 속성

본문 요소에 대한 저장소 참조

먼저 웹사이트의 <body>에 대한 참조를 저장해야 합니다. 웹 페이지의 모든 콘텐츠를 래핑하는 요소:

const bodyElement = document.querySelector("body")

"마우스오버 시" 이벤트 설정

이제 사용자가 페이지 위로 마우스를 이동할 때 수신 대기하는 이벤트를 설정하고 배경색을 re로 변경하는 함수를 실행합니다. JavaScript 파일에 다음 코드를 추가하십시오.

const bodyElement = document.querySelector("body")

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

훌륭합니다!

"마우스아웃 시" 이벤트 설정

그렇다면 사용자가 다시 웹사이트 프레임 외부로 마우스를 이동할 때 배경색을 기본 흰색으로 다시 변경하려면 어떻게 해야 합니까?

위에서 창 이벤트를 복사하고 mouseover를 바꿀 수 있습니다. mouseout 사용 및 backgroundColor "white"으로 .

그러면 코드는 다음과 같을 것입니다.

const bodyElement = document.querySelector("body")

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

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "white"
})

작동합니다!

하지만 이것이 이 문제를 해결하는 가장 좋은 방법입니까?

불행히도, 우리는 할 수 없습니다 (jQuery와 달리) 단일 이벤트 리스너에 여러 이벤트를 추가하면 코드가 덜 중복됩니다.

그러나 다음과 같이 두 개의 명명된 함수를 설정하고 각각을 창 이벤트 리스너에 전달할 수 있습니다.

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 지침을 따른다는 점에서 조금 더 깔끔합니다.

이 코드는 재사용도 가능합니다. 이제 두 사람을 이름이 지정된이라고 부를 수 있기 때문에 많은 상황에서 실용적인 모든 유형의 이벤트 리스너에서 기능합니다.

코드 데모를 확인하세요.

색상 값의 경우 실제 이름(예:"빨간색"), 16진수를 사용할 수 있습니다. 또는 rgba 가치.