웹에서 마우스 휠(Wheel) 이벤트

마우스 이벤트 중 마우스 휠 이벤트는 아직까지도 각각의 웹 브라우저에서 다른 형태로 제공되고 있습니다. 아래는 HTML Element에 대한 휠 이벤트를 할당하는 코드입니다.

// for IE, Chrome, Opera
this._div.addEventListener('mousewheel', this._mouseWheel);

// for FireFox
this._div.addEventListener('DOMMouseScroll', this._mouseWheel, false);

IE와 크롬, 오페라에서는 mousewheel이라는 이벤트 이름으로 제공하고 파이어폭스에서는 DOMMouseScroll이라는 이벤트 이름으로 제공됩니다. 이 휠 이벤트를 처리하는 함수의 예(위의 예제의 경우 this._mouseWheel 함수)는 다음과 같습니다.

_mouseWheel: function(e) {
    var delta = 0;

    /* For IE */
    if (!e) e = window.event;
            
    if (e.wheelDelta) delta = e.wheelDelta / 120; /* IE/Chrome/Opera */
    else if (e.detail) delta = -e.detail/3; /* Mozilla case */

    e.preventDefault();
}

휠 이벤트에서 휠에 대한 정도를 얻는 속성도 다릅니다. 파이어폭스에서는 detail이고 그 외에서는 wheelDelta입니다.