鼠标滚动，触发互动，玩转交互基础（终章）

前端

2024-02-15 17:15:13

鼠标和滚轮事件（三）

鼠标和滚轮的协同作用赋予网页多种互动功能，让我们可以通过这些事件与网页内容进行直接互动。在前面两篇文章中，我们讨论了鼠标按键事件和鼠标移动事件，剩下的鼠标滚轮事件将在本篇文章中和大家见面。

1. 鼠标滚轮事件

鼠标滚轮事件，顾名思义，是当用户滚动鼠标滚轮时触发的事件。它的存在使得网页可以平滑滚动，用户可以轻松地浏览网页内容，大大提高了用户体验。

1.1 事件类型

在浏览器中，鼠标滚轮事件主要有以下两种类型：

wheel事件 ：这种事件在用户滚动鼠标滚轮时触发，无论鼠标指针是否悬停在任何元素上。
mousewheel事件 ：这种事件在用户滚动鼠标滚轮时触发，但仅当鼠标指针悬停在元素上时才会触发。

1.2 事件对象

当鼠标滚轮事件触发时，浏览器会创建一个事件对象，其中包含有关该事件的信息。事件对象具有以下属性：

deltaY ：表示鼠标滚轮滚动的垂直距离。如果鼠标滚轮向上滚动，则该值为正；如果鼠标滚轮向下滚动，则该值为负。
deltaX ：表示鼠标滚轮滚动的水平距离。如果鼠标滚轮向右滚动，则该值为正；如果鼠标滚轮向左滚动，则该值为负。
deltaMode ：表示鼠标滚轮滚动的模式。该属性可以具有以下三个值：
- 0 ：表示鼠标滚轮以逐行模式滚动。
- 1 ：表示鼠标滚轮以逐页模式滚动。
- 2 ：表示鼠标滚轮以自定义模式滚动。

1.3 事件处理

要处理鼠标滚轮事件，可以使用以下步骤：

确定要处理鼠标滚轮事件的元素。
为该元素添加一个事件监听器。
在事件监听器中，使用事件对象中的信息来处理鼠标滚轮事件。

下面是一个处理鼠标滚轮事件的示例：

// 确定要处理鼠标滚轮事件的元素
const element = document.getElementById('my-element');

// 为该元素添加一个事件监听器
element.addEventListener('wheel', (event) => {
  // 使用事件对象中的信息来处理鼠标滚轮事件
  console.log(event.deltaY);
  console.log(event.deltaX);
  console.log(event.deltaMode);
});