L'événement de défilement de poulie de liaison JS natif est compatible avec les compétences courantes de browsers_javascript

L'événement de défilement de la page à molette est rencontré dans les effets spéciaux des pages Web, mais les méthodes d'implémentation sont différentes selon les navigateurs. La méthode que j'ai implémentée ci-dessous est compatible avec les navigateurs courants.

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; 
}

Lieux remarquables dans le code :

1 Pourquoi utiliser document.addEventListener && !document.attachEvent pour distinguer IE ?

attachEvent et detachEvent sont des méthodes spécifiques à IE pour lier et dissocier des événements. Cette méthode n'existe que dans IE. Cependant, dans le navigateur IE9, une méthode addEventListener plus générale est implémentée pour lier les événements. S'il existe une méthode document.addEventListener dans le navigateur, vous pouvez exclure les versions qui ne sont pas IE8 et versions antérieures, mais inclure le navigateur IE9, utilisez donc &&!document.attachEvent plus tard pour exclure le navigateur IE9.

2 Il convient de noter qu'il n'y a pas d'événement mousewheel dans le navigateur FF et que le temps de déclenchement du défilement est DOMMouseScroll.

3 Une autre chose à noter est que lorsque vous utilisez addEventListener pour lier un événement, on n'est pas ajouté devant le nom de l'événement, mais lorsque vous utilisez attachEvent pour lier un événement dans IE, on est requis.