[제이쿼리(jQuery) UI] 마우스휠이벤트 1. 마우스 휠 이벤트 를 알아보자.

마크업 부터 시작하는 UI/마우스 휠 사용한 UI 2015. 9. 20. 22:57

728x90

마우스 휠을 이용하여 이벤트를 만들어 봅시다.

이 장에서는 마우스 휠에 대한 이론을 살펴 보도록 합시다.

예제용 UI를 찾아보려고 했는데 도통 간단한게 없어서 일단 예를 보여드리도록 하겠습니다.

마우스 휠을 아랫방향으로 했을 때에는 -120

마우스 휠을 윗 방향으로 했을 때에는 120 이라는 숫자가 뜨죠?

이해를 돕기 위해 js 피들의 javascript 탭에 주석으로 달아 놓긴 했지만

다시한번 글을 적어보도록 하겠습니다.

일단 제가 설치한 브라우저는

크롬(Chrome), 익스(IE), 파이어폭스(Firefox) 기준으로 말씀드리겠습니다.

다른 브라우저는 테스트 해보진 않았지만 아마도(죄송합니다.. ㅠㅠ)

익스, 크롬, 사파리, 오페라 의 경우엔

mousewheel 이라는 이벤트를 사용할 수 있고

파이어폭스 의 경우엔

DOMMouseScroll 이라는 이벤트를 사용할 수 있습니다.

즉... 파이어 폭스는 mousewheel 이라는 이벤트가 없기 때문에

mousewheel 과 DOMMouseScroll 이벤트 두개를 동시에 걸어주는 메서드인 .on() 를 사용해야 합니다.

스크린샷을 찍어보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style></style>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $("html, body").on('mousewheel DOMMouseScroll', function(e) {
                var E = e.originalEvent;
                delta = 0;
                console.log(E);
                if (E.detail) {
                    delta = E.detail * -40;
                    $('body').text(delta);
                }else{
                    delta = E.wheelDelta;
                    $('body').text(delta);
                };
            });
        });
   </script>
</head>
<body>
    
</body>
</html>
Colored by Color Scripter
cs