• Q&A
  • 회원가입
  • 로그인

[DOM_Event] JS - wheel 이벤트 (= onwheel속성) ★ - 마우스휠 스크롤 이벤트

목차
  1. wheel 예제 - 마우스휠 이벤트 (HTML 속성 방식)
  2. wheel 정의
  3. wheel 구문
  4. wheel 예제 - 마우스휠 이벤트 (JS 속성 방식)
  5. wheel 예제 - 마우스휠 이벤트 (JS 메서드 방식)

 

wheel 예제 - 마우스휠 이벤트 (HTML 속성 방식)

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz" onwheel="homzzang()">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

function homzzang() {

  document.getElementById("hz").style.fontSize = "30px";

}

</script>

 


wheel 정의

 

아래 경우에 이벤트 발생.

  • 사용자가 마우스휠을 위 또는 아래로 굴릴 때 발생.
  • 사용자가 터치패드(예: 랩톱의 "마우스") 사용해 요소를 스크롤하거나 확대 또는 축소할 때도 발생.

 


 

1.

  • 이벤트확산: O
  • 취소가능성: O
  • 이벤트타입: WheelEvent
  • 지원HTML: 모든 HTML 요소
  • DOM 버전: Level 3 Events

 

2.

마우스휠 스크롤 양 표시 속성

  • deltaX 속성: X축 기준 마우스휠 스크롤량
  • deltaY 속성: Y축 기준 마우스휠 스크롤량 ★
  • deltaZ 속성: Z축 기준 마우스휠 스크롤량

 

3.

mousewheel 이벤트는 폐기예고 (Deprecated) 됨.

앞으로는 wheel 이벤트 사용.

 

4.

IE9 이상 주요 최신 브라우저 모두 지원.

  • Safari는 지원 X
  • IE 경우, 휠 이벤트는 addEventListener() 메서드 방식만 지원. (∵ DOM 객체엔 onwheel 속성 없음.)

 

 

wheel 구문

 

HTML 속성 방식

<element onwheel="homzzang()">

 

JS 속성 방식

object.onwheel = function(){homzzang()};

 

JS 메서드 방식 (★ 권장 방식)

object.addEventListener("wheel", homzzang);

 

 

wheel 예제 - 마우스휠 이벤트 (JS 속성 방식)

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

document.getElementById("hz").onwheel = function() {homzzang()};


function homzzang() {

  document.getElementById("hz").style.fontSize = "30px";

}

</script>

 

결과보기

 

wheel 예제 - 마우스휠 이벤트 (JS 메서드 방식)

 

<style>

#hz {

  border: 1px solid black;

}

</style>


<div id="hz">홈짱닷컴 Homzzang.com<br>코딩언어 강의<br>그누보드 강의<br>서버관리 강의<br>재밌는 노래 소개</div>


<script>

document.getElementById("hz").addEventListener("wheel", homzzang);


function homzzang() {

  this.style.fontSize = "20px";

}

</script>

 

결과보기

PS. HTML 속성 방식이나 JS 속성 방식 경우엔, this 키워드 사용 시 작동 X

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012