[attribute] HTML - onwheel 속성 - 마우스휠/터치패드휠 움직일 때 실행 (= onwheel속성 = 온휠속성) ※ onwheel이벤트 = 온휠이벤트

1. onwheel 예제 - 마우스휠/터치패드 움직일 때 실행
2. onwheel 정의
3. onwheel 구문

onwheel 예제 - 마우스휠/터치패드 움직일 때 실행

 

<style>

#hz {

  border: 1px solid black;

  padding:10px;

}

</style>

<div id="hz" onwheel="homzzang()"><li>홈짱닷컴 Homzzang<li>홈페이지 제작관리 강의<li>그누보드 기초강의</div>

<script>

function homzzang() {

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

}

</script>

결과보기

onwheel 정의

 

(마우스/터치패드) 등의 휠이 위/아래로 움직일 때 실행할 코드 지정.

 

---

 

1. onwheel 속성 사용 가능 태그 종류

모든 가시 HTML 요소

 

2.

onmousewheel 속성이 폐기예고(Deprecated) 됨. 대신 onwheel 속성 사용.

 

3.

모든 브라우저 지원.

 

onwheel 구문

 

HTML 방식

• <element onwheel="myScript">

 

JS 방식 (3가지)

• object.onwheel = ()=>{myScript};
• object.onwheel = function(){myScript};
• object.addEventListener("wheel", myScript);

---

[속성값]

 

myScript

휠이 위/아래로 움직일 때, 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.