웹 개발을 하다 보면 사용자가 특정 요소 위에서 마우스 휠을 위 또는 아래로 굴렸을 때 자바스크립트 코드를 실행해야 하는 경우가 있습니다. 이럴 때 HTML의 onwheel 속성을 활용하면 간단하게 처리할 수 있습니다.
onwheel 속성이란?
onwheel 속성은 마우스 포인터가 해당 요소 위에 있는 상태에서 휠을 위로 또는 아래로 굴리는 순간 이벤트를 발생시킵니다. 확대·축소 기능, 스크롤 기반 애니메이션, 이미지 뷰어 등 다양한 인터랙티브 UI를 구현할 때 유용하게 사용됩니다.
아래 예제는 제목(h3) 요소 위에서 마우스 휠을 굴리면 글자 색상이 빨간색으로 바뀌는 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.
예제 코드
<!DOCTYPE html>
<html>
<body>
<h3 id = "myid" onwheel = "mouseWheel()">
This is demo heading.
</h3>
<p>Click above and use mouse wheel to change the heading color.</p>
<script>
function mouseWheel() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>
코드 설명
- <h3 id="myid" onwheel="mouseWheel()"> : h3 요소에
onwheel속성을 지정하여, 휠 이벤트가 발생하면mouseWheel()함수가 호출되도록 합니다. - mouseWheel() 함수 :
document.getElementById()로 해당 요소를 찾은 뒤,style.color값을 "red"로 변경합니다.
참고: addEventListener 방식
인라인 속성 대신 자바스크립트에서 이벤트 리스너를 등록하는 방식도 널리 사용됩니다. 아래와 같이 작성하면 HTML과 스크립트를 분리할 수 있어 유지보수에 더 유리합니다.
document.getElementById("myid").addEventListener("wheel", function() {
this.style.color = "red";
});
이처럼 onwheel 속성 또는 wheel 이벤트를 활용하면, 마우스 휠 조작에 반응하는 다양한 동적 웹 페이지를 손쉽게 만들 수 있습니다.