---
title: WheelEvent
slug: Web/API/WheelEvent
tags:
  - API
  - DOM
  - Reference
  - WheelEvent
  - 接口
translation_of: Web/API/WheelEvent
---
<p>{{APIRef("DOM Events")}}</p>

<p><code><strong>WheelEvent</strong></code> 接口表示用户滚动鼠标滚轮或类似输入设备时触发的事件。</p>

<div class="warning"><strong>重要：该事件为标准规定的滚轮事件接口。</strong>早期的浏览器实现过{{ domxref("MouseWheelEvent") }}和{{domxref("MouseScrollEvent")}}两种滚轮事件接口，但这两种接口皆非标准，加之各浏览器间对其兼容性极差。因而开发者应使用该标准事件接口取代这两个非标准接口。</div>

<div class="note"><strong>不要混淆 <code>wheel</code> 事件和 {{event("scroll")}} 事件：</strong>{{event("wheel")}} 事件的默认动作取决于浏览器实现。因此 <code>wheel</code> 事件不一定会触发 {{event("scroll")}} 事件。即便滚轮事件引发了文档内容的滚动行为，也不表示 <code>wheel</code> 事件中的 <code>delta*</code> 值恰好反映文档内容的滚动方向。因此，不要依赖 <code>delta*</code> 属性获知文档内容的滚动方向。可在文档内容滚动事件（{{event("scroll")}}）中监视target的{{domxref("Element.scrollLeft", "scrollLeft")}}和{{domxref("Element.scrollTop", "scrollTop")}}的变化以推断滚动方向。</div>

<p>{{InheritanceDiagram}}</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
 <dd>创建一个<code>WheelEvent</code>对象。</dd>
</dl>

<h2 id="属性">属性</h2>

<p><em>该接口继承了父接口{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的属性。</em></p>

<dl id="raw_prop">
 <dt>{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}</dt>
 <dd>返回<code>double</code>值，该值表示滚轮的横向滚动量。</dd>
 <dt>{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}</dt>
 <dd>返回<code>double</code>值，该值表示滚轮的纵向滚动量。</dd>
 <dt>{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}</dt>
 <dd>返回<code>double</code>值，该值表示滚轮的z轴方向上的滚动量。</dd>
 <dt>{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}</dt>
 <dd>返回<code>unsigned long</code>值，该值表示上述各<code>delta*</code>的值的单位。该值及所表示的单位如下：
 <table class="standard-table">
  <tbody>
   <tr>
    <td class="header">常量</td>
    <td class="header">值</td>
    <td class="header">描述</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_PIXEL</code></td>
    <td><code>0x00</code></td>
    <td>滚动量单位为像素。</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_LINE</code></td>
    <td><code>0x01</code></td>
    <td>滚动量单位为行。</td>
   </tr>
   <tr>
    <td><code>DOM_DELTA_PAGE</code></td>
    <td><code>0x02</code></td>
    <td>滚动量单位为页。</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>该接口本身未定义方法，但继承了父接口{{domxref("MouseEvent")}}、{{domxref("UIEvent")}}、{{domxref("Event")}}的方法。</em></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}}</td>
   <td>{{Spec2("UI Events")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events','#interface-wheelevent','WheelEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.WheelEvent")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{ event("wheel") }} 事件</li>
 <li>该接口取代的过时接口：
  <ul>
   <li>{{ domxref("MouseScrollEvent") }}（Gecko内核浏览器）</li>
   <li>{{ domxref("MouseWheelEvent") }}（非Gecko内核的浏览器）</li>
  </ul>
 </li>
</ul>