기본 JS 바인딩 풀리 스크롤 이벤트는 일반적인 browser_javascript 기술과 호환됩니다.

웹 페이지 특수 효과에서 휠 스크롤 이벤트가 발생하지만 브라우저마다 구현 방법이 다릅니다. 아래에 구현한 방법은 일반적인 브라우저와 호환됩니다.

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이 필수라는 점입니다.