온휠 이벤트
예시
사용자가 <div> 요소 위로 마우스 휠을 굴리면 해당 글꼴 크기를 변경합니다.
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
정의 및 사용
onwheel 이벤트는 요소 위에서 마우스 휠을 위 또는 아래로 굴릴 때 발생합니다.
onwheel 이벤트는 사용자가 터치패드(예: 랩톱의 "마우스")를 사용하여 요소를 스크롤하거나 확대 또는 축소할 때도 발생합니다.
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Event | |||||
|---|---|---|---|---|---|
| onwheel | 31.0 | 9.0 | 17.0 | Not supported | 18.0 |
참고: IE에서 휠 이벤트는 addEventListener() 메서드에서만 지원됩니다. DOM 객체에는 onwheel 속성이 없습니다.
통사론
HTML:
<element onwheel="myScript">
자바스크립트:
object.onwheel = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("wheel", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 네 |
|---|---|
| 취소 가능: | 네 |
| 이벤트 유형: | 휠 이벤트 |
| 지원되는 HTML 태그: | 모든 HTML 요소 |
| DOM 버전: | 레벨 3 이벤트 |