웹 페이지 특수 효과에서 휠 스크롤 이벤트가 발생하지만 브라우저마다 구현 방법이 다릅니다. 아래에 구현한 방법은 일반적인 브라우저와 호환됩니다.
function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener && !document.attachEvent) { document.addEventListener('mousewheel',getData); //FF绑定滚动事件 document.addEventListener('DOMMouseScroll',getData); } //IE else if(document.attachEvent && !document.addEventListener){ document.attachEvent('onmousewheel',getData); }else{ window.onmousewheel = getData; }
코드에서 주목할만한 장소:
1 IE를 구별하기 위해 document.addEventListener && !document.attachEvent를 사용하는 이유는 무엇입니까?
attachEvent 및 detachEvent는 이벤트 바인딩 및 이벤트 바인딩 해제를 위한 IE 전용 메서드입니다. 그러나 IE9 브라우저에서는 이벤트를 바인딩하기 위해 보다 일반적인 addEventListener 메소드가 구현되었습니다. 브라우저에 document.addEventListener 메소드가 있는 경우 IE8 이하 버전은 제외하되 IE9 브라우저는 포함할 수 있으므로 나중에 &&!document.attachEvent를 사용하여 IE9 브라우저를 제외할 수 있습니다.
2 FF 브라우저에는 마우스휠 이벤트가 없으며 스크롤을 트리거하는 시간은 DOMMouseScroll이라는 점에 주목할 가치가 있습니다.
3 또 한 가지 주목할 점은 addEventListener를 사용하여 이벤트를 바인딩할 때 이벤트 이름 앞에 on이 추가되지 않지만, IE에서 attachmentEvent를 사용하여 이벤트를 바인딩할 때는 on이 필수라는 점입니다.