본문 바로가기

웹 프로그래밍/웹

[Javascript] 마우스 휠 이벤트, 위 아래 판단하기.


 저도 그렇지만 일단 제이쿼리를 야매(?)로 배운 사람들의 특징은 예외 처리, 버블링 캡쳐링, 이벤트의 객체에 대해서 이해하지 않고 있다는 것입니다.

 모든 이벤트는 이벤트 발생시 해당 함수 인자에 이벤트 객체를 전송합니다.

 사실 대부분의 이벤트 리스너를 등록할 때에는 이런 고민을 하지 않아도 되지만 터치 이벤트나 스크롤 이벤트는 "위로 갔는지 아래로 갔는지" 확인해야할 떄가 많습니다. 그러한 정보가 전달받은 이벤트 객체 내에 들어있습니다.

 event > originalEvent > wheelDelta 에서 해당되는 정보를 얻을 수 있습니다. 

$("body").on("mousewheel", function (event) { console.log(event.originalEvent.wheelDelta); });

 위와 같은 리스너를 콘솔에 등록하고 이벤트 발생시 위로 올리면 양수 값이 아래로 내리면 음수값이 나오는 것을 알 수 있습니다.