事件参考

触发 事件 是为了通知可能影响代码执行的 "有趣的变化" 代码。这些可能是由用户交互（例如使用鼠标或调整窗口大小）、底层环境状态的变化（例如电池电量低或来自操作系统的媒体事件）以及其他原因引起的。

¥Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events from the operating system), and other causes.

每个事件都由基于 Event 接口的对象表示，并且可能具有其他自定义字段和/或函数来提供有关所发生事件的信息。每个事件的文档都有一个表格（靠近顶部），其中包含关联事件界面的链接以及其他相关信息。事件 > 基于事件的接口 中给出了不同事件类型的完整列表。

¥Each event is represented by an object that is based on the Event interface, and may have additional custom fields and/or functions to provide information about what happened. The documentation for every event has a table (near the top) that includes a link to the associated event interface, and other relevant information. A full list of the different event types is given in Event > Interfaces based on Event.

本主题提供了你可能感兴趣的主要事件类型（动画、剪贴板、工作人员等）的索引，以及实现这些类型事件的主要类。最后是所有记录事件的简单列表。

¥This topic provides an index to the main sorts of events you might be interested in (animation, clipboard, workers etc.) along with the main classes that implement those sorts of events. At the end is a flat list of all documented events.

注意：此页面列出了你在网络上遇到的许多最常见的事件。如果你正在搜索此处未列出的事件，请尝试在 MDN 的其余部分中搜索其名称、主题区域或相关规范。

¥Note: This page lists many of the most common events you'll come across on the web. If you are searching for an event that isn't listed here, try searching for its name, topic area, or associated specification on the rest of MDN.

事件索引

¥Event index

事件类型 描述 文档
动画

与 网页动画 API 相关的事件。

用于响应动画状态的变化（例如动画开始或结束时）。

 在 Document、 Window、 HTMLElement 上触发的动画事件。
异步数据获取

与获取数据相关的事件。

 在 AbortSignal、 XMLHttpRequest、 FileReader 上触发的事件。
剪贴板

与 剪贴板 API 相关的事件。

用于在剪切、复制或粘贴内容时发出通知。

 在 Document、 Element、 Window 上触发的事件。
作品

与作曲相关的事件；输入文本 "indirectly"（而不是使用普通的键盘按键）。

例如，通过语音到文本引擎输入的文本，或使用修改键盘按下的特殊组合键来表示另一种语言的新字符。

 在 Element 上触发的事件。
CSS 过渡

与 CSS 过渡 相关的事件。

当 CSS 转换开始、停止、取消等时提供通知事件。

 在 Document、 HTMLElement、 Window 上触发的事件。
数据库

与数据库操作相关的事件：开仓、平仓、交易、错误等。

 在 IDBDatabase、 IDBOpenDBRequest、 IDBRequest、 IDBTransaction 上触发的事件。
DOM 突变

与文档对象模型 (DOM) 层次结构和节点修改相关的事件。

警告： 突变事件 已弃用。应使用 突变观察者。

Drag'n'drop, 滚轮

与使用 HTML 拖放 API 和 车轮事件 相关的事件。

拖动和滚轮事件源自鼠标事件。虽然它们在使用鼠标滚轮或拖放时被触发，但它们也可以与其他适当的硬件一起使用。

 

      <a href="/en-US/docs/Web/API/Document#drag_drop_events"
        ><code>Document</code></a
      > 上触发的拖动事件
    </p>
    <p>
      在 
      <a href="/en-US/docs/Web/API/Element/wheel_event"
        ><code>Element</code></a
      > 上触发的车轮事件
    </p>
  </td>
</tr>
<tr>
  <td>重点</td>
  <td><p>与元素获得和失去焦点相关的事件。</p></td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Element#focus_events"
      ><code>Element</code></a
    >、
    <a href="/en-US/docs/Web/API/Window#focus_events"><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>形式</td>
  <td>
    <p>与构建、重置和提交表单相关的事件。</p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/HTMLFormElement#events"
      ><code>HTMLFormElement</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>全屏</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Fullscreen_API">全屏 API</a> 相关的事件。
    </p>
    <p>
      用于通知全屏和窗口模式之间的转换，以及转换期间发生的错误。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Document#fullscreen_events"
      ><code>Document</code></a
    >、
    <a href="/en-US/docs/Web/API/Element#fullscreen_events"
      ><code>Element</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>游戏句柄</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Gamepad_API">游戏句柄 API</a> 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#gamepad_events"
      ><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>手势</td>
  <td>
    <p>
      建议使用 <a href="/en-US/docs/Web/API/Touch_events">触摸事件</a> 来实现手势。
    </p>
  </td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/Document#touch_events"
        ><code>Document</code></a
      >、
      <a href="/en-US/docs/Web/API/Element#touch_events"
        ><code>Element</code></a
      > 上触发的事件。
    </p>
    <p>此外还有一些非标准手势事件：</p> <ul> <li> 
        <a href="/en-US/docs/Web/API/Element#touch_events"
          ><code>Element</code></a
        >：
        <a href="/en-US/docs/Web/API/Element/gesturestart_event"
          ><code>gesturestart</code> 事件</a
        >、
        <a href="/en-US/docs/Web/API/Element/gesturechange_event"
          ><code>gesturechange</code> 事件</a
        >、
        <a href="/en-US/docs/Web/API/Element/gestureend_event"
          ><code>gestureend</code> 事件</a
        > 上的非标准 WebKit 特定事件。</li> </ul>
  </td>
</tr> 
<tr>
  <td>历史</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/History_API">历史 API</a> 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#history_events"
      ><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>HTML 元素内容显示管理</td>
  <td>
    <p>
      与更改显示或文本元素的状态相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/HTMLDetailsElement#events"
      ><code>HTMLDetailsElement</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLDialogElement#events"
      ><code>HTMLDialogElement</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLSlotElement#events"
      ><code>HTMLSlotElement</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>输入</td>
  <td>
    <p>
      与 HTML 输入元素相关的事件，例如 <input>、<select> 或 <textarea>。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/HTMLElement#input_events"
      ><code>HTMLElement</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLInputElement#events"
      ><code>HTMLInputElement</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>键盘</td>
  <td>
    <p>
      与使用 
      <a href="/en-US/docs/Web/API/KeyboardEvent">keyboard</a> 相关的事件。
    </p>
    <p>用于在向上、向下移动或刚刚按下按键时发出通知。</p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Document#keyboard_events"
      ><code>Document</code></a
    >、
    <a href="/en-US/docs/Web/API/Element#keyboard_events"
      ><code>Element</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>加载/卸载文档</td>
  <td><p>与加载和卸载文档相关的事件。</p></td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/Document#load_unload_events"
        ><code>Document</code></a
      > 和 
      <a href="/en-US/docs/Web/API/Window#load_unload_events"
        ><code>Window</code></a
      > 上触发的事件。
    </p>
  </td>
</tr> 
<tr>
  <td>舱单</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/Manifest">渐进式 Web 应用清单</a> 安装相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#manifest_events"
      ><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr id="media">
  <td>多媒体</td>
  <td>
    <p>
      与媒体使用相关的事件（包括 
      <a href="/en-US/docs/Web/API/Media_Capture_and_Streams_API#events"
        >多媒体捕获和流 API</a
      >、
      <a href="/en-US/docs/Web/API/Web_Audio_API#events">Web 音频 API</a>、
      <a href="/en-US/docs/Web/API/Picture-in-Picture_API#events"
        >画中画 API</a
      > 等）。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/ScriptProcessorNode#events"
      ><code>ScriptProcessorNode</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLMediaElement#events"
      ><code>HTMLMediaElement</code></a
    >、
    <a href="/en-US/docs/Web/API/AudioTrackList#events"
      ><code>AudioTrackList</code></a
    >、
    <a href="/en-US/docs/Web/API/AudioScheduledSourceNode#events"
      ><code>AudioScheduledSourceNode</code></a
    >、
    <a href="/en-US/docs/Web/API/MediaRecorder#events"
      ><code>MediaRecorder</code></a
    >、
    <a href="/en-US/docs/Web/API/MediaStream#events"
      ><code>MediaStream</code></a
    >、
    <a href="/en-US/docs/Web/API/MediaStreamTrack"
      ><code>MediaStreamTrack</code></a
    >、
    <a href="/en-US/docs/Web/API/VideoTrackList#events"
      ><code>VideoTrackList</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLTrackElement#events"
      ><code>HTMLTrackElement</code></a
    >、
    <a href="/en-US/docs/Web/API/OfflineAudioContext#events"
      ><code>OfflineAudioContext</code></a
    >、
    <a href="/en-US/docs/Web/API/TextTrack#events"><code>TextTrack</code></a
    >、
    <a href="/en-US/docs/Web/API/TextTrackList#events"
      ><code>TextTrackList</code></a
    >、
    <a href="/en-US/docs/Web/HTML/Element/audio#events">元素/音频</a>、
    <a href="/en-US/docs/Web/HTML/Element/video#events">元素/视频</a> 上触发的事件。
  </td>
</tr> 
<tr>
  <td>消息传递</td>
  <td>
    <p>
      与从另一个浏览上下文接收消息的窗口相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#messaging_events"
      ><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>鼠标</td>
  <td>
    <p>
      与使用 
      <a href="/en-US/docs/Web/API/MouseEvent">电脑鼠标</a> 相关的事件。
    </p>
    <p>
      用于在鼠标单击、双击、向上和向下事件、右键单击、移入和移出元素、文本选择等时发出通知。
    </p> 
    <p>
      指针事件提供了与硬件无关的鼠标事件替代方案。拖动和滚轮事件源自鼠标事件。
    </p>
  </td> 
  <td>
    
    <a href="/en-US/docs/Web/API/Element#mouse_events"
      ><code>Element</code></a
    > 上触发的鼠标事件
  </td>
</tr> 
<tr>
  <td>网络连接</td>
  <td><p>与获得和失去网络连接相关的事件。</p></td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/Window#connection_events"
        ><code>Window</code></a
      > 上触发的事件。
    </p>
    <p>
      在 
      <a href="/en-US/docs/Web/API/NetworkInformation#event_handler"
        ><code>NetworkInformation</code></a
      > (<a href="/en-US/docs/Web/API/Network_Information_API"
        >网络信息 API</a
      >) 上触发的事件。
    </p>
  </td>
</tr> 
<tr>
  <td>付款方式</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Payment_Request_API"
        >付款请求 API</a
      > 相关的事件。
    </p>
  </td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/PaymentRequest#events"
        ><code>PaymentRequest</code></a
      >、
      <a href="/en-US/docs/Web/API/PaymentResponse#events"
        ><code>PaymentResponse</code></a
      > 上触发的事件。
    </p>
  </td>
</tr> 
<tr>
  <td>性能</td>
  <td>
    <p>
      与分组到 
      <a href="/en-US/docs/Web/API/Performance_API"
        >性能 API</a
      > 中的任何性能相关规范相关的事件。
    </p>
  </td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/Performance#events"
        ><code>Performance</code></a
      > 上触发的事件。
    </p>
  </td>
</tr> 
<tr>
  <td>指针</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Pointer_events">指针事件 API</a> 相关的事件。
    </p>
    <p>
      通过鼠标、触摸屏、笔/手写笔等定点设备提供与硬件无关的通知。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Document#pointer_events"
      ><code>Document</code></a
    >、
    <a href="/en-US/docs/Web/API/HTMLElement#pointer_events"
      ><code>HTMLElement</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>打印</td>
  <td><p>与打印相关的事件。</p></td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#print_events"><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>承诺拒绝</td>
  <td>
    <p>
      当任何 JavaScript Promise 被拒绝时发送到全局脚本上下文的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Window#promise_rejection_events"
      ><code>Window</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>插座</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets API</a> 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/WebSocket#events"><code>Websocket</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>SVG</td>
  <td><p>与 SVG 图片相关的事件。</p></td> 
  <td>
    <p>
      在 
      <a href="/en-US/docs/Web/API/SVGElement#events"
        ><code>SVGElement</code></a
      >、
      <a href="/en-US/docs/Web/API/SVGAnimationElement#events"
        ><code>SVGAnimationElement</code></a
      >、
      <a href="/en-US/docs/Web/API/SVGGraphicsElement#events"
        ><code>SVGGraphicsElement</code></a
      > 上触发的事件。
    </p>
  </td>
</tr> 
<tr>
  <td>文本选择</td>
  <td>
    <p>
      与选择文本相关的 <a href="/en-US/docs/Web/API/Selection">选择 API</a> 事件。
    </p>
  </td> 
  <td>
    <p>
      事件 (<code>selectionchange</code>) 在 HTMLTextAreaElement、HTMLInputElement 上触发。
    </p>
  </td>
</tr> 
<tr>
  <td>触碰</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Touch_events">触摸事件 API</a> 相关的事件。
    </p>
    <p>
      提供与触摸屏交互（即使用手指或手写笔）的通知事件。与 
      <a href="/en-US/docs/Web/API/Force_Touch_events#events"
        >压力触摸 API</a
      > 无关。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/Document#touch_events"
      ><code>Document</code></a
    >、
    <a href="/en-US/docs/Web/API/Element#touch_events"
      ><code>Element</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>虚拟现实</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR 设备 API</a> 相关的事件。
    </p> <div class="记录卡警告">
      <p>
        <strong>警告</strong>：
        <a href="/en-US/docs/Web/API/WebVR_API">网络 VR API</a>（以及相关的 
        <a href="/en-US/docs/Web/API/Window#webvr_events"
          ><code>Window</code> 事件</a
        >）已被弃用。
      </p> </div>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/XRSystem#events"><code>XRSystem</code></a
    >、
    <a href="/en-US/docs/Web/API/XRSession#events"><code>XRSession</code></a
    >、
    <a href="/en-US/docs/Web/API/XRReferenceSpace#events"
      ><code>XRReferenceSpace</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>RTC（实时通信）</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/RTCDataChannel#events"
      ><code>RTCDataChannel</code></a
    >、
    <a href="/en-US/docs/Web/API/RTCDTMFSender#events"
      ><code>RTCDTMFSender</code></a
    >、
    <a href="/en-US/docs/Web/API/RTCIceTransport#events"
      ><code>RTCIceTransport</code></a
    >、
    <a href="/en-US/docs/Web/API/RTCPeerConnection#events"
      ><code>RTCPeerConnection</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>服务器发送的事件</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Server-sent_events"
        >服务器发送事件 API</a
      > 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/EventSource#events"
      ><code>EventSource</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>演讲</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Web_Speech_API">网络语音 API</a> 相关的事件。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/SpeechSynthesisUtterance#events"
      ><code>SpeechSynthesisUtterance</code></a
    > 上触发的事件。
  </td>
</tr> 
<tr>
  <td>工人</td>
  <td>
    <p>
      与 
      <a href="/en-US/docs/Web/API/Web_Workers_API">网络工作者 API</a>、
      <a href="/en-US/docs/Web/API/Service_Worker_API">服务工作者 API</a
      >、
      <a href="/en-US/docs/Web/API/Broadcast_Channel_API"
        >广播通道 API</a
      > 和 
      <a href="/en-US/docs/Web/API/Channel_Messaging_API"
        >渠道消息 API</a
      > 相关的事件。
    </p>
    <p>
      用于响应新消息和消息发送错误。服务工作人员还可以收到其他事件的通知，包括推送通知、用户单击显示的通知、推送订阅已失效、从内容索引中删除项目等。
    </p>
  </td> 
  <td>
    在 
    <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope#events"
      ><code>ServiceWorkerGlobalScope</code></a
    >、
    <a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope#events"
      ><code>DedicatedWorkerGlobalScope</code></a
    >、
    <a href="/en-US/docs/Web/API/SharedWorkerGlobalScope#events"
      ><code>SharedWorkerGlobalScope</code></a
    >、
    <a href="/en-US/docs/Web/API/WorkerGlobalScope#events"
      ><code>WorkerGlobalScope</code></a
    >、
    <a href="/en-US/docs/Web/API/Worker#events"
      ><code>Worker</code></a
    >、
    <a href="/en-US/docs/Web/API/BroadcastChannel#events"
      ><code>BroadcastChannel</code></a
    >、
    <a href="/en-US/docs/Web/API/MessagePort#events"
      ><code>MessagePort</code></a
    > 上触发的事件。
  </td>
</tr>

规范

Specification
HTML Standard
# events-2

¥Specifications