onwheel 이벤트

DOM 이벤트 WheelEvent

정의와 사용법

마우스 휠이 요소 위에서 상하로 스크롤될 때, onwheel 이벤트가 발생합니다.

사용자가 터치패드를 사용하여 요소를 스크롤하거나 확대/축소할 때도 onwheel 이벤트가 발생합니다.

예제

사용자가 <div> 요소 위에서 마우스 휠을 스크롤할 때, 글꼴 크기를 변경합니다:

document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
  this.style.fontSize = "35px";
}

직접 시험해 보세요

문법

HTML에서:

<엘리먼트 onwheel="myScript">

직접 시험해 보세요

JavaScript에서:

오브젝트.onwheel = function(){myScript};

직접 시험해 보세요

JavaScript에서 addEventListener() 메서드를 사용하여:

오브젝트.addEventListener("wheel", myScript);

직접 시험해 보세요

주의사항:인터넷 익스플로어 8 또는 이전 버전은 지원하지 않습니다. addEventListener() 메서드.

기술 세부 사항

버블링: 지원
취소 가능: 지원
이벤트 유형: WheelEvent
지원하는 HTML 태그: 모든 HTML 요소
DOM 버전: 레벨 3 이벤트

브라우저 지원

이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전이 표에 나와 있습니다.

이벤트 크롬 IE 파이어폭스 사파리 오페라
onwheel 31.0 9.0 17.0 지원되지 않음 18.0

주의사항:IE에서는 addEventListener() 메서드를 통해만 wheel 이벤트가 지원됩니다. DOM 객체에는 onwheel 속성이 없습니다.

DOM 이벤트 WheelEvent