滑鼠滾輪事件詳解

一、事件概述

當用戶使用滑鼠滾輪進行滾動操作時，就會觸發滑鼠滾輪事件。該事件通常用於控制被滾動的元素或者頁面的滾動行為。

當用戶向前滾動滑鼠滾輪時，會觸發一次滾輪事件；當用戶向後滾動滑鼠滾輪時，也會觸發一次滾輪事件。而且，滑鼠滾輪事件在網頁中廣泛使用，如圖片縮放、列表滾動、地圖縮放等等。

二、事件屬性

滑鼠滾輪事件包含以下的屬性：

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來改變圖片的大小和透明度。