一、事件概述
当用户使用鼠标滚轮进行滚动操作时，就会触发鼠标滚动事件。该事件通常用于控制被滚动的元素或者页面的滚动行为。
当用户向前滚动鼠标滚轮时，会触发一次滚轮事件；当用户向后滚动鼠标滚轮时，也会触发一次滚轮事件。而且，鼠标滚轮事件在网页中广泛使用，如图片缩放、列表滚动、地图缩放等等。
二、事件属性
鼠标滚轮事件包含以下的属性：
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来改变图片的大小和透明度。
