鼠标滚轮事件详解

一、事件概述

当用户使用鼠标滚轮进行滚动操作时，就会触发鼠标滚轮事件。该事件通常用于控制被滚动的元素或者页面的滚动行为。

当用户向前滚动鼠标滚轮时，会触发一次滚轮事件；当用户向后滚动鼠标滚轮时，也会触发一次滚轮事件。而且，鼠标滚轮事件在网页中广泛使用，如图片缩放、列表滚动、地图缩放等等。

二、事件属性

鼠标滚轮事件包含以下的属性：

deltaX：表示水平方向上的滚动量；
deltaY：表示垂直方向上的滚动量；
deltaMode：表示滚动的模式，默认为pixel（像素）。

其中，deltaMode的值为0时，代表按像素滚动；1时代表按行滚动；2时代表按页滚动。

三、事件监听

鼠标滚轮事件可以通过绑定事件监听函数来实现响应。使用addEventListener()方法可以将一个事件的监听函数绑定到指定事件上，比如将滚轮事件的监听函数绑定到document对象上：

document.addEventListener("mousewheel", function(event) {
  console.log(event.deltaY);
});

此时，当用户滚动鼠标滚轮时，console.log()函数将会输出滚动的距离。

四、事件兼容性

鼠标滚轮事件不是所有浏览器都支持的，需要根据不同的浏览器适配相应的事件。比如在W3C标准下，使用addEventListener()方法绑定的监听函数为“wheel”事件：

document.addEventListener("wheel", function(event) {
  console.log(event.deltaY);
});

而在FireFox浏览器下，使用的则是“DOMMouseScroll”事件：

document.addEventListener("DOMMouseScroll", function(event) {
  console.log(event.detail);
});

因此，在编写跨浏览器代码时，需要做好事件兼容性工作。

五、应用举例

下面是一个简单的应用实例。当用户滚动鼠标滚轮时，会根据滚动距离改变图片的大小和透明度：

<img src="example.jpg" id="example">
<script>
  var img = document.getElementById("example");
  var delta = 0;
  document.addEventListener("mousewheel", function(event) {
    delta += event.deltaY;
    img.style.width = (200 + delta / 10) + "px";
    img.style.opacity = (1 - delta / 1000);
  });
</script>

通过绑定“mousewheel”事件监听函数，根据鼠标滚轮的滚动距离delta来改变图片的大小和透明度。