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 가치.